آموزش استفاده از فونت آیکن 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) است، ما در این آموزش هیچ اشاره ای به این موضوع نکردیم چرا که روش مناسب و صحیحی نیست.

به همین دلیل پیشنهاد می کنیم حتما مقاله ویرایشگر پوسته و افزونه را غیرفعال کنید! را نیز مطالعه فرمائید.

برچسب ها
سعید یاورنیا 117 نوشته 118 دیدگاه

توسعه دهنده وب، کارشناس ارشد نرم افزار.

دیدگاه ‌ها

  • رویا ۱۴ اردیبهشت ۱۳۹۹ - ۱۲:۱۴

    سپاس از مقاله خوب و مفیدتون – خسته نباشید .

    سوال پیش میاد که چرا از  cdn فونت ها در وردپرس استفاده نکنیم ؟ امکان پیش اومدن چه مشگلی هستش

    • سعید یاورنیا ۱۴ اردیبهشت ۱۳۹۹ - ۲۱:۰۵

      خواهش می کنم.
      اتفاقا CDN خیلی خوبه فقط باید به چند نکته توجه داشته باشید:

      ۱- بعضی از CDN های خارجی IP های ایران رو بستن یا ممکنه در آینده تحریم کنن.
      ۲- اگر فایل های CSS که فونت آیکون ها هم یکی از اونهاست در هاست خود وب سایت وجود داشته باشه این اطمینان وجود داره که فایل های شما همیشه در دسترس باشند و سایت شما با مشکل مواجه نشه.
      ۳- می تونید از CDN های ایرانی مثل ابر آروان استفاده کنید که دیگه مشکل تحریمم نداشته باشید.

  • امین ۳۰ اردیبهشت ۱۳۹۹ - ۲۰:۰۹

    سلام جناب مهندس یاور نیا عزیر
    اگر فونت اسم و بوت استراپ را از طریق cdn ها به صفحه اضافه کنیم بهتر است یا مستقیم فایل هاشون را در قالب قرار بدیم
    ممنون

    • سعید یاورنیا ۱ خرداد ۱۳۹۹ - ۱۰:۰۵

      سلام امین عزیز.
      استفاده از CDN بستگی به Scale وب سایت داره.

      مثلا برای وب سایتی مثل مدیر دِو ترجیح میدم از CDN استفاده نکنم و حتی Font Awesome و Bootstrap رو به روش های زیر سبکتر و بهینه تر کنم:

      ۱- طبیعتا از همه آیکون های Font Awesome استفاده نمی کنیم، بنابراین می تونیم به کمک ابزاری مثل IconMoon فقط فونت آیکون هایی که لازم داریم رو خروجی بگیریم.

      ۲- Bootstrap قابلیت های زیادی داره که از همه اونها استفاده نخواهیم کرد، بنابراین می تونیم با استفاده از Bootstrap Customize فقط موارد موردنیاز رو خروجی گرفته و در پروژه استفاده کنیم.

  • امین ۳ خرداد ۱۳۹۹ - ۱۵:۳۵

    سلام وقت بخیر جناب مهندس یاور نیا عزیر
    ظاهرا Bootstrap Customize برای نسخه ۴ وجود نداره

    • سعید یاورنیا ۴ خرداد ۱۳۹۹ - ۱۳:۳۴

      سلام امین جان.
      حق با شماست، اما می توانید فایل های SASS بوت استرپ ۴ رو خودتون Customize کنید، bootstrap امکانات مختلف خودش رو توی فایل SCSS جداگانه تعریف کرده، هر آنچه رو که لازم دارید import کنید.
      لینک زیر به این موضوع اشاره کرده:

      Customize Bootstrap 4

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.