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

تبلیغات
کانال تلگرام فتولیا

قدیما استفاده از آیکن در وب سایت خیلی مشکل بود چون مجبور بودیم تصاویر مختلف پیدا کنیم و در فتوشاپ resize کنیم تا آماده برای استفاده در سایت شود.بعد ها تکنیک CSS Sprite آمد و کمی این کار راحت تر شد ولی هنوز مشکلاتی مثل سرعت لود پایین و حجم زیاد تصاویر پابرجا بود. برای همین آیکن ها را داخل فونت قرار دادند تا هم مزیت های فونت (تغییر سایز و رنگ بدون افت کیفیت در CSS) و حجم کم  سرعت لود بالا و استفاده آسان در همه جای سایت یکجا در اختیار طراحان وب قرار گیرد.

در حال حاضر این تکنیک که وب فونت Web Font نامیده می شود در اکثر سایت های روز دنیا استفاده می شود و یکی از کتابخانه های مطرح و کامل در این زمینه FontAwesome می باشد.

این کتابخانه در حال حاضر بیش از ۶۰۰ آیکن در زمینه های مختلف و حتی لوگو برندهای مطرح را در خود جای داده است.برای استفاده از آن دو راه دارید.

  • دانلود کامل FontAwesome – نیاز به دانلود فایل ها دارد
  • استفاده از CDN – نیاز به دانلود فایل ها ندارد ولی برای استفاده لوکال همیشه باید به اینترنت متصل باشید

دانلود و نصب FontAwesome

با مراجعه به آدرس fontawesome.io/get-started و زدن دکمه Download فایل zip این کتابخانه را دانلود نمایید و در پوشه سایت خود از حالت فشرده خارج نمایید . فقط کافیست فایل font-awesome.min.css را به صورت زیر در بخش <head> صفحه وارد نمایید:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

استفاده از CDN

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

در همین رابطه :   آموزش جامع طراحی وبلاگ(قسمت دهم)

در این روش کافیست به این لینک رفته و در کادر بالا آدرس ایمیل تان را وارد کنید تا لینک CDN برای تان ارسال شود.که مثل لینک زیر خواهد بود:

<script src="https://use.fontawesome.com/84c3f8fd28.js"></script>

و به همان روش بالا به بخش <head> اضافه کنید.

روش استفاده از FontAwesome

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

<i class="fa fa-linode" aria-hidden="true"></i>

هر جایی که می خواهید آیکن مورد نظر رو نمایش بدید باید این کد رو همونجا کپی کنید. عبارت یا کلاس fa-linode ،آیکن مورد نظر را مشخص می کند و برای آیکن های مختلف متفاوت خواهد بود که در صفحه هر آیکن می توانید آن را پیدا کنید.

 

امیدوارم از این کتابخانه استفاده کنید و لذت ببرید.

پاسخ دهید

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

More in PHP
فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

سلام :) در این مبحث اگر موافق باشید می خواهیم روی یک فرم با شمایل فیبر کربن ! کار کنیم...

Close