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

آیکن ها در ایجاد جلوه های بصری در سایت و همچنین کمک به فهم عناصر موجود در سایت بسیار حائزاهمیت هستند، در گذشته برای نمایش یک آیکن در سایت ، از تصویر آن آیکن استفاده می شد که کار به مراتب وقت گیری بود ، مضاف بر این که حجم تصاویر استفاده شده در سایت لود سایت را هم تحت تاثیر قرار میداد، در حال حاضر استفاده از فونت هایی که خود شامل تعداد زیادی آیکن هستند، نحوه استفاده از آیکن ها را در سایت به مراتب ساده تر نموده است ، علاوه بر این امکان اعمال کدهای css مثل رنگ و سایز فونت و... روی این اشکال ایکن ها امکان پذیر شده است.

بوت استرپ نیز به صورت پیش فرض از کلاس های فونت glyphicon استفاده میکند، این کلاس ها جایگزین فوق العاده ای برای استفاده از آیکن های سابق که به صورت img استفاده می شدند هستند.

نحوه فراخوانی این کلاس ها به شکل زیر است:

برای استفاده از آیکن های بوت استرپ به یک برچسب span به همراه گروه پایه ی glyphicon و آیکن فردی گروه *-glyphicon نیاز خواهید داشت.

<span class="glyphicon glyphicon-name"></span>

یعنی هرجایی که شما نیاز به استفاده از یک آیکن دارید که البته نام آن در لیست آیکن های glyphicon وجود دارد، می توانید از کد بالا استفاده کنید، که به جای name، نام آن آیکن قرار میگیرد.

برای آشنایی با آیکن هایی که میتوانید استفاده کنید ، کافیست به آدرس http://getbootstrap.com/components/ مراجعه کنید.

نمونه ای از استفاده از این آیکن ها در زیر نمایش داده شده است:

<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>

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

البته حتما نیازی نیست که از این آیکن ها در سایت خود استفاده کنید، شاید شما نیاز به استفاده از مجموعه آیکن های دیگری مثل fontawsome داشته باشید، برای این کار کافیست که فونت آیکن مورد نظر خود را با دستور زیر در کدهای css خود تعریف کنید و فونت مورد نظر را در پوشه ی fonts فونت های خود قرار دهید و بعد از آن با استفاده از ساختار دستوری آن فونت، از فونت مورد نظر بهره گیرید.

@font-face{
font-family:'FontAwesome';
src:url('../fonts/icons/fontawesome-webfont.eot?v=4.6.2');
src:url('../fonts/icons/fontawesome-webfont.eot?#iefix&v=4.6.2') format('embedded-opentype'),url('../fonts/icons/fontawesome-webfont.woff2?v=4.6.2') format('woff2'),url('../fonts/icons/fontawesome-webfont.woff?v=4.6.2') format('woff'),url('../fonts/icons/fontawesome-webfont.ttf?v=4.6.2') format('truetype'),url('../fonts/icons/fontawesome-webfont.svg?v=4.6.2#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;
}

نظرات
نظرات

برای کامنت گذاری، فرم زیر را پر کنید یا ثبت نام کنید ( جهت ورود به سیستم می توانید از استفاده کنید )