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

شکی نیست که ما انسانها موجوداتی ویژوالی و بصری هستیم و این باعث می شود که در کنار محتوایی که یک وب سایت یا اپلیکیشن ارائه می دهد به طراحی و ظاهر آن نیز توجه داشته باشیم. به همین دلیل است که طراحان و توسعه دهندگان وب تمام تلاش خود را می کنند تا در کنار تصاویر از فونت آیکن ها(Font Icons) نیز استفاده کنند. این آیکن ها در بخش های مختلفی از فرم های جستجو گرفته تا منوهای ناوبری(Navigation Menu) قابل مشاهده هستند.

فونت آیکن Icon fonts

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

مزیت های فونت آیکن را از چند منظر می توان بررسی نمود:

  1. برداری(وکتور/Vector) هستند، این بدان معناست که هر اندازه سایزشان را تغییر دهید به هیچ عنوان از کیفیتشان کاسته نخواهد شد، در مقابل تصاویر پیکسلی بوده و در سایزهای بزرگ به شدت کیفیت خود را از دست می دهند.
  2. می توانید به کمک CSS رنگ و اندازه آنها را بسته به نیازتان تغییر دهید.
  3. حجم بسیار کمی دارند که این موضوع بر روی زمان لود وب سایت تاثیرگذار است.
  4. با کلیه مرورگرها سازگار هستند.

Font Awesome چیست؟

Font Awesome یکی از محبوبترین کلکسیونرهای دنیای فونت است که می توانید از آیکن های آن در وب سایت یا اپلیکیشن خود استفاده کنید، این مجموعه در دو نسخه رایگان(Free) و پولی(Pro) ارائه شده است. آخرین آپدیت رایگان آن چیزی در حدود ۱۵۰۰ آیکن دارد که نیاز شما را از هر جهت برطرف می کند. برای مشاهده لیست کامل آنها به fontawesome.com/icons مراجعه کنید.

فونت آیکن Font Awsome

Font Awesome و وردپرس

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

۱- دانلود فونت آیکن و قرار دادن در قالب سایت

در صورتی که به فایل های وب سایت تان دسترسی دارید از این روش استفاده کنید، برای این منظور ابتدا از لینک Hosting Font-Awesome Yourself فایل Zip آیکن ها را دانلود کرده و از حالت فشرده خارج نمائید. در فایل مربوطه چندین دایرکتوری وجود دارد که ما فقط از webfonts و css استفاده می کنیم. توجه داشته باشید که آیکن های Font Awesome در چهار نوع Solid، Regular، Light و Brands دسته بندی شده اند که می توانید از همه آنها یا گروه خاصی استفاده کنید.

تصویر زیر محتویات دایرکتوری css را نشان می دهد.

انواع فونت در font-awesome

اگر می خواهید از همه آیکون ها استفاده کنید ابتدا فایل “all.min.css” را کپی کرده و در دایرکتوری با نام (مثلا css) در قالب وب سایت قرار دهید. همچنین پوشه webfonts را نیز به صورت کامل در کنار این دایرکتوری کپی کنید.

ساختار font-awesome در وردپرس

سپس کدهای زیر را در فایل functions.php قرار دهید تا امکان فراخوانی و استفاده از فونت آیکن ها فراهم گردد.

function my_theme_stylesheets()
{
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_stylesheets' );

حال می توانید از فونت های مدنظرتان به صورت زیر استفاده نمائید.

<i class="fa fa-user"></i> <!-- uses solid style -->
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fab fa-github-square"></i> <!-- uses brands style -->

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

فونت آیکن font awesome

در انتها کلیه فایل ها و تغییرات انجام شده را از طریق FTP یا کنترل پنل هاست به سرور اصلی منتقل نمائید.

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

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

function my_theme_stylesheets()
{
    wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_stylesheets' );

شما می توانید CDN را مستقیما در تگ Head فایل header.php  قرار دهید، اما اینکار روش مناسبی برای استفاده در وردپرس نیست و به هیچ عنوان توصیه نمی شود.

<head>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>

۳- نصب افزونه وردپرس

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

افزونه better font awesome

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

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

جمع بندی

یکی از امکاناتی که وردپرس در اختیارتان قرار می دهد امکان ویرایش فایل های قالب با استفاده از گزینه ویرایشگر در منوی نمایش(Appearance) است، ما در این آموزش هیچ اشاره ای به این موضوع نداشتیم چرا که روش مناسب و اصولی نیست. به همین دلیل پیشنهاد می کنیم مقاله ویرایشگر پوسته و افزونه را غیرفعال کنید! را نیز مطالعه فرمائید.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *