آموزش استفاده از Font Awesome

بازدید: 8

آموزش استفاده از Font Awesome : سلام بازم مثل گذشته ، سعی در انتقال تجربیات دارم.

قبلا با فونت awesome آشنا بودم ، ولی بهشون نیازی نداشتم برای استفاده ، تا اینکه توی یکی از قالب های وردپرس که در حال تبدیل PSD به تم بودم جذبم کرد و رفتم دنبالش و تصمیم گرفتم همین قسمت رو براتون یه آموزش کوچولو بذارم.

آموزش استفاده از Font Awesome

Font Awesome چیست و چه کارایی دارد ؟

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

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

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

 

در مرحله بعدی فایل را ذخیره کنید.

حال پس از ذخیره امکان نمایش فونت آیکون در سایت شما افزوده خواهد شد!

برای استفاده از فونت ها در طراحی قالب ، باید به وب سایت اصلی فونت awesome مراجعه کنید ( از طریق این لینک )

 

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

آموزش استفاده از Font Awesome

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

آموزش استفاده از Font Awesome

آموزش استفاده از Font Awesome

 

و این مرحله که خروجی کار من رو نشون میده :

آموزش استفاده از Font Awesome

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

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

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