نمادها

شما اینجا هستید

آموزش Bootstrap جلسه سیزدهم(Glyphicons)

در خدمت شما هستیم با آموزش Bootstrap جلسه سیزدهم (Glyphicons)

آموزش Bootstrap جلسه سیزدهم (Glyphicons) از سری آموزش های تک قسمتی است

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

این آیکن ها از سایت گلیف آیکن می آید و بوت استرپ از آن استفاده  می کند

البته می توانید از سایت fontawesome نیز استفاده کنید که آموزش استفاده از آن در لینک زیر موجود است

آموزش استفاده از 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)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

همچنین میتوانید ویدیو آموزش را در یوتیوب نیز ببینید
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap جلسه سیزدهم(Glyphicons): نوع فایل:mp4 حجم فایل:46.73 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

یک دیدگاه برای “آموزش Bootstrap جلسه سیزدهم (Glyphicons)”

  1. متین ستوده گفت:

    مطلب خوب و جالبی بود لطفا آموزش ساخت منو رسپانسیو با آیکن هم بذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.