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

سلام ;

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

اپلیکیشن‌ها ، اجتماعی ، سرویس ها , دسته‌بندی و… می‌باشند.

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

در فونت آیکون ها به راحتی میتوایند با استفاده از قابلیت Css به آیکون های خودتون استایل های متفاوتی اعم از : رنگ , سایز و… اعمال نمائید .

 Font Awesome چیست ؟

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

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

  1. ایجاد سایز دلخواه توسط css با حفظ کیفیت آیکون
  2. پشتیبانی توسط همه مرورگر ها
  3. اعمال استایل های متفاوت مانند رنگ , پس زمینه و …
  4. استفاده آسان توسط کد های کوتاه

استفاده از فونت آیکون در وردپرس

 استفاده از فونت آیکون در وردپرس

روش های استفاده از فونت آیکون (font awesome) در وردپرس

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

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

 

بیشتر بخوانید :  افزونه JSON API وردپرس

افزونه‌ای که قصد معرفی آن را دارم  Better Font Awesome نام دارد که در مخزن وردپرس با ۶۰ هزار نصب فعال و با کسب ۵ امتیاز میباشد که به راحتی با نصب و فعال سازی افزونه از این قابلیت در وردپرس خود استفاده کنید .

پس از نصب و فعال سازی این افزونه گزینه ای در بخش پیشخوان > تنظیمات به نام Better Font Awesome فعال میشود که با کلیک بر روی این گزینه به تنظیمات افزونه فونت آیکون هدایت میشوید .

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

تنظیمات افزونه فونت آیکون Font Awesome

version : در این بخش ورژن دلخواه خود را انتخاب کنید .

Use minified Css : در این بخش استایل های فونت آیکون را فشرده میکند تا باعث لود سریع سایت شود .

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

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

 استفاده از فونت آیکون در وردپرس با Better Font Awesome در تصویر بالا همانطور که میدانید قابلیت اضافه کردن ایکن اضافه شده است لذا در بخش Type to filter میتوانید فونت مورد نظر خود را جستجو کنید .

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

برای فراخونی استایل فونت آیکون font awesome کد زیر را در فایل functions قالب خود درج کنید :

حال با درج کد بالا در قالب قابلیت فونت ایکون به قالب شما اضافه میشود .

بیشتر بخوانید :  سفارشی سازی صفحه خطای 404 در وردپرس با افزونه Forty Four

برای اینکه بتوانید فونت دلخواه خود را قالب اضافه کنید به صفحه  Font Awesome رفته و فونت دلخواه خود را انتخاب کنید .

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

طبق تصویر زیر :

استفاده از فونت آیکون در وردپرس

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

موفق و پیروز باشید

 

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

3 دیدگاه

  • سلام ووقت بخیر.من همونطور که فرمودید فانکشن قالب رو تغییر دادم اما خطا داد: add_action( 'mechanicwp_fontawesome', 'enqueue_load_fa' ); function enqueue_load_fa() { mechanicwp_fontawesome( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); } The file C:\xampp\htdocs\mysite name\wp-content\themes\Bigikala\functions.php is corrupted. متاسفانه بک آپ نگرفته بودم و حالا همه چی تو سایتم خراب شده. و صفحه که باز میکنم همین خطا میاد. طفا بفرمایید چیکار کنم؟ پ.ن. کاش توی توضیحاتتون راهنمایی میکردید که: قبل از هر کاری از فانکشن بک آپ باید گرفت٬ تا کسی به همچین مشکلی برنخوره!