با سلام خدمت شما علاقه مندان به آموزش های طراحی سایت و فریم ورک محبوب بوت استرپ 3
در جلسه قبلی با آموزش ساخت دکمه های گروهی در بوت استرپ در خدمت شما بودیم و در این جلسه با گلیف آیکن ها در بوت استرپ آشنا میشویم.
فونت آیکون چیست؟
قبل از اینکه مبحث گلیف آیکون در بوت استرپ 3 را آغاز کنیم لازم است تا مفهوم فونت آیکون در طراحی وب آشنا شوید.
همان طور که از نام فونت آیکون پیداست، نوعی آیکون هستند که به صورت فونت در طراحی های جدید مورد استفاده قرار می گیرند. یعنی این فونت ها به جای عدد یا کاراکترهای الفبای یک زبان به صورت اشکال می باشند و همانطور که به فونت ها رنگ و اندازه و تغییرات دیگری می دهیم به این فونت آیکون ها هم می توان همان تغییرات را اعمال کرد.
مزایای استفاده از فونت آیکون در طراحی سایت
فونت آیکون ها نسبت به آیکن ها با فرمت های تصویری مختلف فواید بسیاری دارند که مهمترین این فواید عبارتند از :
- توسط کلیه مرورگرها پشتیبانی می شوند
- سرعت بارگزاری بسیار بالایی دارند
- استایل دهی فونت آیکون ها توسط CSS انجام میشود
- کیفیت فونت آیکون ها در بزرگنمایی افت نمی کند
گلیف آیکن در بوت استرپ 3 چیست؟
بوت استرپ نیز حدود 260 فونت آیکن به نام Glyphicons را از مجموعه Glyphicons Halflings به صورت رایگان در اختیار شما قرار می دهد. از گلیف آیکون ها می توانید در متنها، دکمه ها ، فرم ها و … استفاده کنید.
در تصویر زیر چند نمونه از گلیف آیکون های بوت استرپ 3 را می توانید مشاهده کنید:
قواعد نوشتاری glyphicons در بوت استرپ 3
برای درج یک گلیف آیکون در بوت استرپ 3 می توانید به شکل زیر از آن استفاده کنید
<span class="glyphicon glyphicon-name"></span>
استایل های مشترک و کلی گلیف آیکون ها از کلاس glyphicon استفاده می شود و هر گلیف آیکون نیز نامی دارند که بعد از کلاس glyphicon به صورت glyphicon-name نوشته میشود.
مثالی از گلیف آیکون ها در بوت استرپ 3
<p>ok icon: <span class="glyphicon glyphicon-ok"></span></p> <p>thumbs up icon as a link: <a href="#"><span class="glyphicon glyphicon-thumbs-up"></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>
