• Telegram
  • Google Plus
  • Linked In

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

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

تاریخ درج: خلاصه

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

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

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

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

تاکنون نظری ارسال نشده است،شما اولین نفر باشید

سؤال یا نظر خود را ارسال کنید

  • Telegram
  • Google Plus
  • Linked In