قالب افق نیوز را با تخفیف 350 هزار تومان و ملت نیوز را 300 هزار تومان خریداری کنید!
1
0

آموزش افزودن فونت آیکون Font Awesome در وردپرس

بدون دیدگاه
  • انتشار : دی ۶, ۱۳۹۷ - 5:56 ق.ظ
  • نویسنده : مدیر کل

اگر به دنبال تغییر و تحولی در ظاهر وبسایت وردپرسی خود هستید تا آن را برای مخاطب جذاب‌تر کنید این مقاله را از دست ندهید.
در این مقاله قصد دارم تا به معرفی فونت آیکون Font Awesome بپردازم. که با استفاده از آن می‌توانید در هر بخش از سایت وردپرسی خود از جمله فهرست‌ها، سایدبار و.. اقدام به نمایش  آیکون های مختلف در وردپرس کنید.

Font Awesome چگونه سرویسی است؟

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

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

این مجموعه بزرگ تا به امروز بیش از ۶۳۴ آیکون را طراحی و ایجاد کرده است که می‌توانید از آیکون های مختلف در وردپرس استفاده کنید.

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

برای استفاده از مجموعه Font Awesome دو روش را در این مقاله معرفی خواهم کرد.
در روش اول که روش آسان‌تری است و بیشتر کاربران آن را می‌پسندند با استفاده از افزونه است.
و در روش دوم با استفاده از کدنویسی در قالب وبسایت است که آن را آموزش خواهیم داد.

استفاده از فونت آیکون در وردپرس یکی از راه‌هایی هستش که با استفاده از اون میتونید رابط کاربری سایت خودتون را بهبود ببخشید و در هر بخش از سایت که از دکمه‌های دانلود و موارد مهمی استفاده می‌کنید از مجموعه فونت آیکون‌های فونت font awesome که شامل یک مجموعه بسیار زیادی از وکتورها در قالب فونت آیکون هستند که در موارد زیادی مثل شبکه‌های اجتماعی، اپلیکیشن‌ها، سایت‌ها، علائم و… را شامل می‌شوند استفاده کنید. استفاده از فونت آیکون در وردپرس و افزودن آیکون‌های این مجموعه فونت باعث زیبایی دوچندان در سایت وردپرسی شما میشه و میتونید ساختار منظم‌تری در سایت خودتون برای هر بخش از سایت استفاده کنید.

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

افزونه‌ای که قصد معرفی اونو دارم با عنوان Better Font Awesome در مخزن وردپرس به ثبت رسیده تا حالا تونسته تا بیش از ۹۰.۰۰۰ نصب فعال و کسب امتیاز ۴.۹ را ازآن خودش بکنه که با استفاده از این افزونه میتونید تا اقدام به نصب مجموعه فونت font awesome در وردپرس کنید. برای استفاده از این افزونه ابتدا با کلیک روی دکمه زیر اونو از مخزن وردپرس دریافت کرده و در وردپرس اقدام به نصب و فعال سازی این افزونه در سایت وردپرسی خودتون بکنید.

البته مزیت دیگه این افزونه این می باشد که در برخی از پوسته ها این فونت به کار رفته است اما گاها به دلیل مشکلی فونتها ناقص نمایش داده می شوند. احتمالا با نصب این افزونه فونتی پوسته به درستی نمایش داده شوند.

بعد از نصب و فعال سازی افزونه مشابه تصویر زیر منویی با نام Better Font Awesome در بخش تنظیمات وردپرس شما اضافه میشه، روی این منو کلیک کنید تا به صفحه افزونههدایت شده و تنظیمات اونو مطابق تصویر زیر شخصی سازی کنید.

 

حالا همونطور که در تصویر میبینید برای استفاده از فونت آیکون در وردپرس ابتدا از قسمت Version نسخه‌ای از فونت آیکون Font Awesome که قصد دارید ازش استفاده کنید را انتخاب کنید. در صورت انتخاب گزینه Always Latest آخرین نسخه از Font Awesome که توی هر بار به‌روزرسانی افزونه منتشر میشه را میتونید در سایت خودتون استفاده کنید.

Use minified CSS: برای اینکه استایل‌های مجموعه فونت آیکون Font Awesome دارای حجم مختلفی هستند با فعال کردن این گزینه قادر هستید تا از نسخه‌ی Minify که شامل کم‌حجم‌ترین نسخه این مجموعه فونت آیکون هست استفاده کنید تا در سرعت بارگزاری صفحات تاثیرزیادی نداشته باشد.

Remove existing Font Awesome: اگر از افزونه‌های جانبی دیگه استفاده می‌کنید و یا اینکه افزونه دیگه‌ای تو سایتتون دارید که این مجموعه فونت در اون قرار دارد برای جلوگیری از لود مجدد فایل آیکون توسط اون افزونه تیک این گزینه را فعال کنید تا فونت آیکون‌های مورد نیاز برای اون افزونه هم از طریق همین افزونه لود و بارگذاری شوند.

Hide admin notices: این گزینه برای اینه که تا هرزمان به هر دلیلی فونت‌ها لود نشدند در بخش پیشخوان پیغام خطایی برای شما نمایش داده بشه تا سریعا مشکل را برطرف کنید.

در نهایت از قسمت USAGE هم میتونید راهنمای استفاده از آیکون‌ها را برای تغییر اندازه و چرخش آیکون‌ها مشاهدهکرده و ازشون استفاده کنید.

برای استفاده از فونت آیکون در مطالب وردپرس با استفاده از این افزونه کافیه تا به صفحه ویرایش نوشته مراجعه کنید. همونطور که در تصویر بالا میبینید دکمه‌ای با نام Insert Icon به ویرایشگر وردپرس اضافه شده که با کلیک روی اون باکسی برای شما باز میشه که میتونید اقدام به جستجو کرده و فونت دلخواه خودتون را برای استفاده در نوشته‌های وردپرس انتخاب کنید. بعد از انتخاب آیکون مورد نظر شورت کد مربوط به نمایش آیکون در ویرایشگر مشابه کد زیر افزوده خواهد شد.

[icon name="wordpress" class="" unprefixed_class=""]

حالا برای تغییر استایل و رنگبندی، تغییر اندازه آیکون و تغییر جهت دادن هر آیکون کافیه تا ویژگی استایل دلخواه خودتون را در کلاس مربوط به آیکون وارد کنید. برای دسترسی و مشاهده کلاس‌های مختلف که برای استفاده در فونت‌های Font Awesome میتونید از اونها استفاده کنید کافیه تا طبق راهنمایی که در قسمت Usage افزونه در تنظیمات وجودداره عمل کنید. به عنوان مثال با اضافه کدن کلاس زیر اندازه آیکون‌ها ۲ برابر خواهد شد.

fa3x
در تصویر زیر به صورت Gif. نحوه استفاده از فونت آیکون Font Awesome در وردپرس را مشاهده می‌کنید.
استفاده از فونت آیکون در وردپرس

افزودن فونت آیکون با کدنویسی

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

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

همانطور که در این کد می‌بینید ورژن استفاده شده در این کد ۴٫۷٫۰ می‌باشد که تا به امروز آخرین نسخه منتشر شده از آن است.

حال پس از درج کد فوق امکان نمایش فونت آیکون در سایت شما افزوده خواهد شد!
برای استفاده از هر فونت آیکون کافی است تا در وبسایت fontawesome نام هر فونت آیکون را از باکس جستجو مشابه زیر پیدا کنید.

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

سپس کد مورد نظر را کپی کرده و در ویرایشگر خود وارد کنید. دقت کنید که ویرایشگر شما در حالت متنی باشد.

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

بدین صورت می توانید  آیکون های مختلف در وردپرس را در وبسایت خود به نمایش بگذارید.

 

صفحه اصلی دانلود مستقیم
×

سـبد خـرید شـما

0 محصول
سبد خرید خالی است!