آیکون

Bulma با همه کتابخانه های فونت آیکون سازگار است: Font Awesome 5 ،
Font Awesome 4 ،Material Design Icons ،Ionicons ، و غیره

رنگ دارد
اندازه دارد
متغیر دارد

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


<span class="icon">
  <i class="fas fa-home"></i>
</span>
                    
پس زمینه زرد فقط برای اهداف نمایشی ، برای برجسته کردن بخش آیکون است.

به طور پیش فرض ، محتوی icon دقیقاً 1.5rem x 1.5rem را اشغال می کند. اندازه خود آیکون متناسب با کتابخانه آیکونی است که از آن استفاده می کنید. به عنوان مثال ، آیکون های Font Awesome 5 اندازه فونت را ارث می برند.


رنگ ها #

از آنجا که فونت های آیکون به سادگی متن هستند، می توانید از راهنمای رنگ برای تغییر رنگ آیکون استفاده کنید.


<span class="icon has-text-info">
  <i class="fas fa-info-circle"></i>
</span>
<span class="icon has-text-success">
  <i class="fas fa-check-square"></i>
</span>
<span class="icon has-text-warning">
  <i class="fas fa-exclamation-triangle"></i>
</span>
<span class="icon has-text-danger">
  <i class="fas fa-ban"></i>
</span>
                    

اندازه #

بخش icon Bulma در 4 اندازه عرضه می شود. همیشه باید کمی بزرگتر از آیکونی باشد که در آن قرار دارد. به عنوان مثال ، آیکون های Font Awesome 5 به طور پیش فرض از اندازه فونت 1em استفاده می کنند (از آنجا که اندازه فونت را به ارث می برد) ، اما اندازه های اضافی را ارائه می دهد.

کلاس بخش سایز بخش کلاس Font Awesome 5 اندازه آیکون نتیجه
icon is-small 1rem x 1rem fas 1em
icon 1.5rem x 1.5rem fas 1em
fas fa-lg 1.33em
icon is-medium 2rem x 2rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
icon is-large 3rem x 3rem fas 1em
fas fa-lg 1.33em
fas fa-2x 2em
fas fa-3x 3em

Font Awesome تغییرات #

Font Awesome همچنین کلاسهای اصلاح کننده ارائه می کند برای : Font Awesome also provides modifier classes for:

  • آیکون های عرض ثابت
  • آیکون های حاشیه دار
  • آیکون های متحرک
  • آیکون های چرخشی و دورانی
  • آیکون های روی هم
نوع کلاس Font Awesome نتیجه
عرض ثابت fas fa-fw
حاشیه دار fas fa-border
متحرک fas fa-spinner fa-pulse
چرخشی و دورانی fas fa-shield-alt
fas fa-shield-alt data-fa-transform="rotate-90"
fas fa-shield-alt data-fa-transform="rotate-180"
fas fa-shield-alt data-fa-transform="rotate-270"
fas fa-shield-alt data-fa-transform="flip-h"
fas fa-shield-alt data-fa-transform="flip-v"





روی هم

<span class="icon is-medium">
  <span class="fa-stack">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
</span>
                                            

<span class="icon is-large">
  <span class="fa-stack fa-lg">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x has-text-danger"></i>
  </span>
</span>
                    

آیکون های Material Design #

در اینجا نحوه استفاده از بخش icon با آیکون های Material Design آورده شده است.

کلاس بخش اندازه بخش کلاس MDI سایز آیکون نتیجه
icon is-small 1rem x 1rem mdi 1em
icon 1.5rem x 1.5rem mdi mdi-18px 18px
mdi mdi-24px 24px
icon is-medium 2rem x 2rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
icon is-large 3rem x 3rem mdi 1em
mdi mdi-18px 18px
mdi mdi-24px 24px
mdi mdi-36px 36px
mdi mdi-48px 48px

MDI نیز کلاس های اصلاح کننده ارائه می کند برای:

  • آیکون های روشن و تیره
  • آیکون های چرخشی و دورانی
نوع کلاس آیکون Material Design نتیجه
رنگ روشن mdi mdi-light
رنگ تیره mdi mdi-dark
رنگ روشن غیرفعال mdi mdi-light mdi-inactive
رنگ تیره غیرفعال mdi mdi-dark mdi-inactive
Flipped mdi mdi-flip-h
mdi mdi-flip-v

Rotated mdi mdi-rotate-45
mdi mdi-rotate-90
mdi mdi-rotate-180



Ionicons #

در اینجا نحوه استفاده از بخش icon با Ionicons آورده شده است.

کلاس بخش اندازه بخش کلاس Ionicon اندازه آیکون نتیج
icon is-small 1rem x 1rem ion-ionic 1em
icon 1.5rem x 1.5rem ion-ionic 1em
icon is-medium 2rem x 2rem ion-ionic 1em
icon is-large 3rem x 3rem ion-ionic 1em

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$icon-dimensions size 1.5rem
$icon-dimensions-small size 1rem
$icon-dimensions-medium size 2rem
$icon-dimensions-large size 3rem