در خدمت شما هستیم با آموزش Bootstrap جلسه سیزدهم (Glyphicons)
آموزش Bootstrap جلسه سیزدهم (Glyphicons) از سری آموزش های تک قسمتی است
سلام برنامه در این آموزش یاد می دهد که چطور از آیکن ها در بوت استرپ استفاده کنید
این آیکن ها از سایت گلیف آیکن می آید و بوت استرپ از آن استفاده می کند
البته می توانید از سایت fontawesome نیز استفاده کنید که آموزش استفاده از آن در لینک زیر موجود است
از مزیت های گلیف آیکن ها حجم آن ها است چرا که تصویر نیستند و فوت هستند لزا بسیار سبک تر از تصویرند
گلیف آیکن ها (Glyphicons)
همانطور که گفته شد گلیف آیکن ها با آیکن های معمولی متفاوت هستند و به آن ها فونت فیس گفته میشود.
از آنجایی که از نوع فونت هستند و با فرمت های فونت اجرا میشوند بسیار سبک هستند.
از معروف ترین آنها میتوان به فونت آسوم اشاره کرد که در بالا معرفی شد.
برای استفاده از گلیف آیکن های گوگل یا همان بوت استرپ نیازی به فراخوانی فایلی نیست و فایل های خود بوت استرپ کافیست.
اما برای اجرای فونت های fontawesome باید ابتدا فونت های آن را از سایتش دانلود کرده و بارگذاری کنید.
اگر نیاز به آموزش برای استفاده از fontawesome دارید میتوانید آموزش ساخت منو با آن را نیز از لینک زیر ببینید
آموزش تصویری ساخت آیکن بار
برای اینکه متوجه استفاده از گلیف آیکن ها بشوید برای شما مثالی میزنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<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>
</div>
</body>
</html>
در مثال بالا از چند گلیف آیکن در حالت های مختلف استفاده کرده ایم
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه دوازدهم(Group Button)
آموزش Bootstrap جلسه چهاردهم(Badges/Labels)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)
مطلب خوب و جالبی بود لطفا آموزش ساخت منو رسپانسیو با آیکن هم بذارید