no-img
اِمیلا

آموزش استفاده از Font Awesome

بروزرسانی؛
4 آوریل 2020
فونت

سرویس Font Awesome شامل مجموعه‌ای بزرگ از وکتورها است که به صورت آیکون می‌باشد که به کمک آن قادر خواهید بود تا از مواردی زیر بهره‌مند شوید:

  • تعیین سایز دلخواه برای هر آیکون بدون نیاز به استفاده از آیکون در اندازه بزرگتر، ضمن حفظ کیفیت
  • امکان تغییر رنگ آیکون‌ها به هر رنگ دلخواهی
  • کارکرد صحیح و پشتیبانی توسط تمامی مرورگرها

برای استفاده از آن سه راه دارید؛

  • دانلود کامل FontAwesome – نیاز به دانلود فایل ها دارد.
  • استفاده از CDN – نیاز به دانلود فایل ها ندارد ولی برای استفاده لوکال همیشه باید به اینترنت متصل باشید.
  • فایل فانکشن (functions.php) قالب سایت.

1- دانلود و نصب 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">

2- استفاده از CDN

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

در این روش کافیست به لینک fontawesome.io/get-started رفته و در کادر بالا آدرس ایمیل تان را وارد کنید تا لینک CDN برای تان ارسال شود.که مثل لینک زیر خواهد بود:

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

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

3- فایل فانکشن (functions.php) قالب سایت

در روش 2 شما می‌توانید کد گفته شده را با ویرایش فایل قالب در سایت خود قرار دهید، اما امکان دارد با توجه به اینکه مستقیم روی کدهای قالب وردپرس خود قرار می‌دهید، سایت دچار مشکل شود. ما پیشنهاد می کنیم فایل فانکشن (functions.php) قالب سایت خود را باز کرده و کد زیر را در آن قرار دهید:

function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );

و یا اینکه از کد زیر در قسمت head قالب سایتتان استفاده نمائید.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

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

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

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

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

لینک کوتاه : https://emila.ir/?p=18216
سلام علیکم!
2
فرم گزارش را به دقت تکمیل نمایید...
از همکاری شما پیشاپیش سپاسگذاریم