آموزش استفاده از Font Awesome
آموزش استفاده از Font Awesome : سلام بازم مثل گذشته ، سعی در انتقال تجربیات دارم.
قبلا با فونت awesome آشنا بودم ، ولی بهشون نیازی نداشتم برای استفاده ، تا اینکه توی یکی از قالب های وردپرس که در حال تبدیل PSD به تم بودم جذبم کرد و رفتم دنبالش و تصمیم گرفتم همین قسمت رو براتون یه آموزش کوچولو بذارم.
آموزش استفاده از Font Awesome
Font Awesome چیست و چه کارایی دارد ؟
سرویس Font Awesome شامل مجموعه‌ای بزرگ از وکتورها است که به صورت آیکون می‌باشد.
به کمک آن قادر خواهید بود تا از مواردی زیر بهره‌مند شوید:
- تعیین سایز دلخواه برای هر آیکون بدون نیاز به استفاده از آیکون در اندازه بزرگتر، ضمن حفظ کیفیت
- امکان تغییر رنگ آیکون‌ها به هر رنگ دلخواهی
- کارکرد صحیح و پشتیبانی توسط تمامی مرورگرها
برای شروع کار فایل فانکشن (functions.php) قالب سایت خود را باز کرده و کد زیر را در آن قرار دهید:
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' ); function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); } |
در مرحله بعدی فایل را ذخیره کنید.
حال پس از ذخیره امکان نمایش فونت آیکون در سایت شما افزوده خواهد شد!
برای استفاده از فونت ها در طراحی قالب ، باید به وب سایت اصلی فونت awesome مراجعه کنید ( از طریق این لینک )
بعد از اینکه وارد سایت شدید ، اسم آیکون مورد نظر خودتون رو سرچ میکنید و نتایجش رو می بینید و هرکدوم رو که شما دوست داشتید می تونید برید داخلش و کدش رو دریافت کنید.
من تلگرام سرچ کردم و میخوام از آیکون تلگرام برای یکی از طراحی هام استفاده کنم ، خیلی ساده کدی رو که در اختیار من گذاشته رو کپی می کنم و توی جایی که دوست دارم ، در قالبم میذارم.
و این مرحله که خروجی کار من رو نشون میده :
نکات مهم آموزش استفاده از Font Awesome
برای استفاده از فونت awesome اگه مایل بودید می تونید فایل رو روی هاست خودتون ذخیره کنید توی قالب فراخونی کنید. و به اصطلاح قالب رو لوکال کرده باشید.
نکته دیگه اینکه تمامی این آیکون های Font Awesome قابلیت رنگ دهی دارن ، و این نکته از روی خروجی کد بنده قابل مشاهده ست. پیروز باشید.