با سلام به شمادوستان عزیز ، امروز میخوام درمورد آیکن های تویتر بوت استرپ توضیح بدم.
در این آموزش فراخواهید گرفت که چگونه از آیکن های تویتر بوت استرپ استفاده کنید.
آیکن هایی با gliphycon
تویتر بوت استرپ دارای ۲۰۰ عدد glyph icon می شود. برخلاف ورژن قبلی این آیکن برای استفاده و مقیاس پذیری بهتر به شکل فونت در دسترس می باشند. از آنجایی که این آیکن ها به شکل فونت در دسترس می باشند، اکنون فقط با به کار بردن ویژگی CSS color روی یک عنصر خاص می توانید آیکن هایی با ر رنگ ایجاد کنید.
نکته:
آیکن های تویتر بوت استرپ توسط Glyph icons ارائه می شوند. به هرحال شما در استفاده از این آیکن ها در پروژه ی خود آزاد می باشید، اما برای احترام می توانید یک لینک بازگشت به گلیفیکن ها در نظر بگیرید.
چگونه از آیکن ها در کد خود استفاده کنید
برای استفاده از آیکن های بوت استرپ به یک برچسب span به همراه گروه پایه ی glyphicon و آیکن فردی گروه glyph icon-*نیاز خواهید داشت. ترکیب کلی برای استفاده از آیکن های بوت استرپ به شکل زیر می باشد.
نام گروه خاصی از آیکن می باشد که در bootstrap CSS تعریف شده است.
برای مثال برای آیکن جستجو می توانید کد زیر را در مورد هر جایی قرار دهید .
?
۱
۲
۳
۴
۵
۶
۷
<button class=”btn btn-default”>
<span class=”glyphicon glyphicon-search”>
</span> Search
</button>
<button class=”btn btn-primary”>
Search</button>
خروجی مثال بالا مانند زیر می باشد.
Bootstrap
فصل بعدی را چک کنید تا ببینید چگونه از آیکن ها برای مولفه های Bootstrap navاستفاده کنید.
نکته:
به یاد داشته باشید هنگامی که از آیکن ها به همراه رشته های متن مانند دکمه های داخلی و لینک های مسیریابی استفاده می کنید، بعد از برچسب عنصر آیکن فضایی را به جا بگذارید تا از فاصله ی مناسب مطمئن شوید.
