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

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

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

اما یکی دیگر از جنبه های یک وب سایت، آیکون های تصویری کوچکی هستند که نه تنها توجه ها را به خود جلب می کنند بلکه توابع مفیدی را نیز اجرا می کنند و برای اهداف مختلفی مانند اشتراک گذاری مطالب در شبکه های اجتماعی، تماس با صاحبان کسب و کارهای آنلاین و دانلود کردن اطلاعات استفاده می شوند. اما آیکون های تصویری معمولی به دلیل افزایش وزن فایل، نیاز به درخواست های http زیاد و موبایل پسند نبودن، در حال از بین رفتن هستند و فونت آیکون ها جای آنها را گرفته اند.

در این مقاله ابتدا در مورد اینکه فونت آیکون ها چیستند و مزایای استفاده از آنها در سایت وردپرس چیست صحبت کرده سپس به شما نشان می دهیم که چگونه با استفاده از افزونه Better Font Awesome فونت آیکون ها را به سایت وردپرس خود اضافه کنید.

فونت آیکون چیست و استفاده از آن چه مزایایی دارد ؟

فونت آیکون ها فونت هایی هستند که کاملاً از آیکون ساخته شده اند. در حقیقت، فونت آیکون را می توان فونتی دانست که فقط کاراکترها یا سمبل ها را نشان می دهد و حروف و اعدادی که فونت های معمولی متن با آنها درست می شوند را شامل نمی شود.

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

آیکون های تصویری در گذشته بسیار متداول بودند اما به دلیل قوانین ناوبری، قابلیت استفاده و طراحی که در دنیای اینترنت امروز حاکم شده است، فونت آیکون ها به راه حل بهتری برای نمایش تصاویر تعاملی در وب سایت ها تبدیل شده اند.

برخی مزایای فونت آیکون ها عبارتند از:

• مقیاس پذیری آسان بدون کاهش کیفیت
• قابلیت تنظیم رنگ و سایه
• 100٪  پاسخگو
• مانند تصویر CSS کار می کند اما می تواند مانند یک متن استایل دهی شود
• استفاده آسان
• Cross-browser دوستانه
• سفارشی سازی میزان شفافیت، چرخش و موارد دیگر
• اندازه فایل کوچکتر
• عدم تأثیر بر سرعت یا عملکرد وب سایت

همانطور که مشاهده می کنید دلایل مختلفی وجود دارد که از فونت آیکون به جای آیکون تصویری در وب سایت خود استفاده کنید.

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

Better Font Awesome  یک افزونه رایگان وردپرس است که به شما امکان می دهد آخرین نسخه Font Awesome را به طور خودکار در سایت وردپرس خود ادغام کنید. علاوه بر این، دارای CSS ، کد کوتاه و تولید کننده کد کوتاه TinyMCE Icon است.

برخی ویژگی های این افزونه عبارت است از:

• بروزرسانی های منظم آخرین نسخه
• امکان جابجایی بین ورژن های Font Awesome بدون ویرایش کد کوتاه
• پشتیبانی از سایر افزونه های محبوب فونت شامل کد کوتاه آنها
• استخراج سریع از jsDeliver CDN

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

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

صفحه ای مشابه شکل زیر مشاهده می کنید.

در این صفحه می توانید تنظیمات افزونه را به صورت زیر پیکربندی کنید:

• version: در این قسمت می توانید مشخص کنید که می خواهید از کدام نسخه Better Font Awesome  استفاده کنید.
  
• Use minified CSS: اگر می خواهید از نسخه مینیفای شده CSS استفاده کنید، چک باکس موجود در این قسمت را علامت بزنید.
  
• Remove existing Font Awesome: با فعال کردن این گزینه، Font Awesome CSS و کد های کوتاه اضافه شده توسط سایر افزونه ها و قالب ها حذف می شوند.
  
• Hide admin notices: فعال کردن این گزینه باعث می شود هشدارهای پیش فرض مدیر که هنگام بروز خطاهای API وCDN  نشان داده می شوند، مخفی شوند.

علاوه بر تنظیمات Font Awesome، یک بخش Usage نیز وجود دارد که با استفاده از آن می توانید نحوه اضافه کردن آیکون ها به وب سایت خود را مشخص کنید.

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

سه روش وجود دارد که با استفاده از Better Font Awesome می توانید آیکون ها را به وب سایت خود اضافه کنید:

• کد کوتاه
• HTML
• TinyMCE

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

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

[icon name="coffee"]
[icon name="coffee" class="fa-2x"]
[icon name="coffee" class="2x spin border"]

توجه داشته باشید که در قسمت icon name باید نام آیکون مورد نظر خود را وارد کنید.

پیشوندهای (-fa و -icon) موردنیاز نیستند ، اما اگر آنها را وارد کنید، خللی در کار افزونه به وجود نمی آید. Better Font Awesome به اندازه کافی هوشمند است که بداند از چه نسخه ای از Font Awesome استفاده می کنید و پیشوند مناسب را تصحیح کند.

بنابراین تمام کد کوتاه های زیر بدون توجه به اینکه از چه نسخه Font Awesome استفاده می کنید، به خوبی کار می کند:

[icon name=”coffee” class=”2x spin border”]
[icon name=”icon-cofee” class=”icon-2x icon-spin icon-border”]
[icon name=”fa-coffee” class=”fa-2x fa-spin fa-border”]

• افزایش اندازه آیکون – به راحتی می توانید اندازه آیکون را افزایش دهید. اگر می خواهید اندازه آیکون را دو برابر کنید ، می بایست (class = “fa-2x”) را در کد کوتاه قرار دهید. اگر اندازه دیگری وجود دارد که می خواهید از آن استفاده کنید، گزینه های “fa-2x” را با گزینه های زیر جایگزین کنید:
  “fa-xs”؛ “fa-sm”؛ “fa-lg”؛ “fa-2x”؛ “fa-3x”؛ “fa-5x”؛ “fa-7x”؛ “fa-10x”
  
• چرخاندن آیکون – آیکن ها را می توان با افزودن rotate به کد کوتاه چرخاند. به عنوان مثال کد [name icon = “coffee” class = “fa-rotate-90] باعث می شود کد کوتاه 90 درجه بچرخد. گزینه های چرخش – “fa-rotate-90″؛ “fa-rotate-180″؛ “fa-rotate-270″؛ “fa-flip-horizontal”؛ “fa-flip-vertical”
  
• انیمیت کردن آیکون – تمام آیکون ها می توانند به دو روش چرخش ساده یا چرخش پالسی متحرک شوند. به عنوان مثال [name icon = “coffee” class = “fa-spin”]. همچنین می توانید از fa-pulse نیز استفاده کنید.
  
• Border – اضافه کردن حاشیه در اطراف یک آیکون به راحتی با افزودن “fa-border” انجام می شود. به عنوان مثال [name icon = “coffee” class = “fa-border”]

اضافه کردن آیکون ها با استفاده از HTML

همانطور که در بخش Usage مشاهده می شود ، شما می توانید از HTML استفاده کنید تا آیکون ها را در وب سایت خود قرار دهید. با این حال ، توسعه دهندگان افزونه هشدار می دهند که استفاده از HTML نیاز به پیشوندهای خاصی دارد که مخصوص هر نسخه هستند. به همین دلیل توصیه می شود که به جای HTML از کد کوتاه استفاده کنید.

برای افزودن آیکون ها به وب سایت خود با استفاده از HTML، ابتدا به وب سایت Font Awesome  بروید. شما می توانید با کلیک بر روی لینک see all available options در قسمت Usage به این سایت دسترسی پیدا کنید.

در سایت Font Awesome روی Icons کلیک کنید تا بتوانید لیست تمام آیکون ها را مشاهده کنید. همچنین می توانید از قسمت جستجوی سایت مستقیماً آیکون مورد نظر خود را جستجو کنید.

شما می توانید هر آیکونی که می خواهید را جستجو کنید. به عنوان مثال، اگر آیکون “ایمیل” را می خواهید باید با استفاده از همین کلید واژه آن را جستجو کنید. سپس با کلیک بر روی آیکون مورد نظر خود، آن را انتخاب کنید.

بعد از کلیک بر روی آیکونی که می خواهید اضافه کنید، صفحه ای مشاهده می کنید که تصویر آیکون، اندازه های مختلف آن و یک دکمه Start Using This Icon را نشان می دهد:

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

اضافه کردن آیکون ها با استفاده از TinyMCE

اگر از ویرایشگر کلاسیک وردپرس استفاده می کنید، ساده ترین روش برای اضافه کردن آیکون ها به وب سایت همین گزینه است. برای استفاده از افزونه Better Font Awesome در ویرایشگر گوتنبرگ وردپرس باید از طریق بلوک کد کوتاه و بلوک HTML سفارشی برای وارد کردن کد کوتاه و کد HTML استفاده کنید.

در ویرایشگر کلاسیک وردپرس، در حالی که در حالت ویرایش دیداری هستید، روی دکمه Insert Icon کلیک کنید.

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

وقتی آیکون مورد نظر خود را پیدا کردید، روی آن کلیک کنید. تولید کننده کد کوتاه به طور خودکار اطلاعات مورد نیاز را وارد نوشته یا برگه شما می کند.

حال می توانید به فرانت اند سایت مراجعه کرده و آیکون خود را مشاهده کنید.

اگر می خواهید فونت های بیشتری به سایت وردپرس خود اضافه کنید می توانید از افزونه Easy Google Fonts برای اضافه کردن فونت های گوگل در وردپرس یا افزونه Use Any Font استفاده کنید.

دانلود افزونه