انواع آیکن ها در بوت استرپ
آیکن های ارائه شده در بوت استرپ
بوت استرپ 200 آیکن را از مجموعه ی آیکن های نمادین، ارائه می دهد.
این آیکن ها می توانند در متن، دکمه ها، نوار ابزارها، ناوبری ها، فرم ها و ... مورد استفاده قرار گیرند.
در زیر چند نمونه از این آیکن ها را مشاهده می کنید:
آیکن نمادین نامه:
آیکن نمادین پرینت:
آیکن نمادین جستجو:
آیکن نمادین دانلود:
نحوه ایجاد آیکن در بوت استرپ
برای ایجاد یک آیکن می توانید به صورت زیر عمل کنید:
قسمت name از کد بالا، باید با نام مناسب آیکن مورد نظر جایگزین شود.
در مثال زیر، راه های مختلف استفاده از آیکن ها نشان داده شده است:
مثال (آیکن های بوت استرپ)
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
خودتان امتحان کنید »
مدال ها(Badges) در بوت استرپ
با استفاده از badge ها می توان تعداد آیتم ها را نشان داد:
اعداد 5و10و2 مدال(badge) می باشند.
برای ایجاد مدال ها(badge) می توانید از کلاس badge. در عناصر <span> استفاده کنید:
مثال (آیکن های بوت استرپ)
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
خودتان امتحان کنید »
مدال ها(badge) می توانند درون عناصر دیگر، مانند دکمه ها، استفاده شوند:
مثال زیر نحوه ی اضافه کردن مدال ها(badge) را به دکمه ها نشان می دهد:
مثال (آیکن های نمادین بوت استرپ)
خودتان امتحان کنید »
مرجع کامل آیکن های بوت استرپ
برای دیدن یک مرجع کامل از تمام آیکن ها، مرجع آیکن های نمادین بوت استرپ را مشاهده نمایید.
- نوشته شده توسط احسان عباسی
- بازدید: 20603
