لوگو لوگوی تاریک
کامپوننت ها

کتابخانه های آیکون

ما چند کتابخانه آیکون های پرطرفدار را در دش‌لایت قرار دادیم که به شما کمک می کند تا به راحتی از آن استفاده کنید.

لطفا توجه کنید: به طور پیش فرض، هیچ یک از کتابخانه آیکون های شخص ثالث به صورت سراسری اضافه نمی شود، بنابراین اگر می خواهید از این کتابخانه آیکون ها استفاده کنید، لطفا لینک را فراموش نکنید. اطلاعات استفاده را در پایین این صفحه خواهید دید.

FontAwesome 5 رایگان

با Font Awesome، پرطرفدار ترین مجموعه آیکون و جعبه ابزار وب، آیکون های برداری و لوگوی شبکه های اجتماعی را در وب سایت خود دریافت کنید.
برای لیست کامل آیکون های FontAwesome، لطفا وب سایت رسمی FontAwesome را بررسی کنید

  • heart کپی شد
  • chart-bar کپی شد
  • comment-dots کپی شد
  • envelope-open کپی شد
  • folder-open کپی شد
  • hand-scissors کپی شد
  • keyboard کپی شد
  • object-ungroup کپی شد
  • paper-plane کپی شد
  • snowflake کپی شد
  • star کپی شد
  • facebook کپی شد
مثال کد
<em class="far fa-heart"></em>
<em class="fas fa-star"></em>
<em class="fab fa-facebook"></em>

آیکون های Themify

آیکون های Themify مجموعه کاملی از آیکون ها برای استفاده در طراحی وب و اپلیکیشن ها هستند، آیکون های دست ساز که از iOS 7 اپل الهام می گیرند.
برای لیست کامل از آیکون های Themify، لطفا وب سایت رسمی Themify را بررسی کنید.

  • heart کپی شد
  • comment-alt کپی شد
  • camera کپی شد
  • palette کپی شد
  • truck کپی شد
  • map-alt کپی شد
  • headphone کپی شد
  • basketball کپی شد
  • vector کپی شد
  • stamp کپی شد
  • star کپی شد
  • rocket کپی شد
مثال کد
<em class="ti ti-heart"></em>
<em class="ti ti-star"></em>

آیکون های بوت استرپ

کتابخانه آیکون منبع باز، با کیفیت بالا و رایگان از تیم بوت استرپ
برای لیست کامل آیکون های بوت استرپ، لطفا وب سایت رسمی بوت استرپ را بررسی کنید.

  • heart کپی شد
  • alarm کپی شد
  • camera کپی شد
  • bar-chart-line کپی شد
  • truck کپی شد
  • basket کپی شد
  • binoculars کپی شد
  • bounding-box کپی شد
  • braces کپی شد
  • bug کپی شد
  • star کپی شد
  • chat-right-dots کپی شد
مثال کد
<em class="bi bi-heart"></em>
<em class="bi bi-star"></em>

دستورالعمل استفاده

از آنجایی که Nioicon فونت آیکون پیش فرض قالب ما است، بنابراین برای استفاده از کتابخانه آیکون شخص ثالث، باید گام دیگری مانند زیر بردارید.

لینک در تگ Head

شما می توانید به سادگی <link> را به تگ <head> در هر صفحه به عنوان مرجع زیر اضافه کنید.

<!-- آیکون های FontAwesome --> <link rel="stylesheet" type="text/css" href="./assets/css/libs/fontawesome-icons.css"> <!-- آیکون های Themify --> <link rel="stylesheet" type="text/css" href="./assets/css/libs/themify-icons.css"> <!-- آیکون های بوت استرپ --> <link rel="stylesheet" type="text/css" href="./assets/css/libs/bootstrap-icons.css">
کامپایل با SCSS

از طرف دیگر، می توانید به صورت سراسری از فایل scss برای کاهش درخواست و بارگذاری مستقیم استفاده کنید. بنابراین، باید فایل /scss/vendor/bundle.scss و بلاک کد مربوطه فعال را مانند زیر ویرایش کنید. پس از هر تغییری باید فایل scss را مجددا کامپایل کنید.

// فقط باید کامنت کدهای کتابخانه مربوطه را برداشته و مجددا کامپایل کنید. //آیکون های FontAwesome $fa-font-path: "../fonts"; @import "fontawesome/fontawesome.scss"; @import "fontawesome/brands.scss"; @import "fontawesome/regular.scss"; @import "fontawesome/solid.scss"; //آیکون های Themify $ti-font-path : "../fonts"; @import "themify-icons/themify-icons"; //آیکون های بوت استرپ $bi-font-path : "../fonts"; @import "bootstrap-icons/bootstrap-icons";
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان