no-img
اِمیلاسلام کاربر مهمان. امروز یکشنبه ۲۸ مهر ۱۳۹۸


ادامه مطلب

انتشار؛ ۰۷ مهر ۱۳۹۸،
21 روز پیش
آموزش استفاده از Font Awesome
امتیاز 5.00 ( 3 رای )
حمایت از emila.ir

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

انتشار؛ ۰۷ مهر ۱۳۹۸ - 21 روز پیش
بازدید؛ 48
نویسنده؛ milipinkman

سرویس 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 فایل ها را لود کند و همچنین در بعضی مواقع ممکن از سرعت سایت را کند کند.

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

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

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

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

فایل فانکشن (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' );

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

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

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

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

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

 


موضوع : وب/ برچسب : , , / لینک کوتاه : https://emila.ir/?p=18216
designer