استفاده از آیکون های Bootstrap

استفاده از آیکون های Bootstrap

تاریخ انتشار: 13 دی 1394

تعداد بازدید: 250 نفر

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

Bootstrap 3.3.6 بیشتر از 250 آیکون (Glyphicon) دارد. این آیکون ها برای استفاده و مقیاس پذیری بهتر در حالت فونت هستند.
از آنجایی که این آیکون ها بر پایه فونت میباشند بنابراین میتوانید با اضافه کردن خصوصیت رنگ ( color ) به عنصر مورد نظر، آیکون هایی با رنگ دلخواه ایجاد نمایید.

نحوه استفاده از آیکون های بوت استرپ در کد :

جهت استفاده از آیکون های بوت استرپ نیاز به یک تگ span به همراه یک کلاس پایه glyphicon و یک کلاس آیکون به نام *- glyphicon. داریم. syntax کلی برای استفاده از آیکون ها به صورت زیر میباشد :



glyphicon-class-name نام یک کلاس آیکون خاص (به طور مثال glyphicon-search ، glyphicon-user ، glyphicon-star و ...) تعریف شده در bootstrap.css میباشد.
برای مثال، جهت استفاده از آیکون جستجو (search) میتوانید از کد زیر استفاده کنید :







خروجی مثال بالا به شکل زیر خواهد بود :





نکته : توجه داشته باشید زمانی که آیکون ها را به همراه رشته های متنی استفاده میکنید به عنوان مثال داخل دکمه ها یا لینک های ناوبری(navigation)، همواره جهت تضمین فاصله مناسب، یک فاصله (space) بعد از تگ پایانی آیکون (یعنی تگ span) بگذارید.

مطلب بعدی -> راهبری (Navigation) در Bootstrap

اشتراک گذاری:
021-41658