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

ثبت نام کنید

وارد شوید

پگاسوس گراف گـــرافیکــ با چاشــــنی عشــــق

قالب

کد و ابزار

آموزش

مطالب پربازید

آخرین محصول سایت قالب چنل یاب

طراحی ورژن دوم قالب pegasus movie

طراحی شده برای سیستم سایت ساز رزبلاگ

سئو تا آخرین حد کشش رزبلاگ

طراحی شده به صورت کاملا واکنشگرا

طراحی و کدنویسی شده به صورت اصولی با و همراه با

پیشنمایش/جزئیات

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

با سلام آرزوی سر بلندی برای کاربران عزیز سایت پگاسوس گراف.

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

قونت آیکون با دو نسخه free با 1557 آیکون و نسخه pro با 7722 آیکون کامل ترین کتابخانه فونت ایکون موجود در سطح اینترنت را در اختیار شما قرار می دهد.

خب در حالت عادی استفاده از نسخه free این کتابخانه آیکون رایگان بوده اما برای استفاده از نسخه pro باید آن را در قبال مبلغی تقریبا 60 دلار از سایت رسمیش خریداری کنید اما همانطور که مستحضر می باشید امکان خرید مستقیم این امکان برای کاربران ایرانی اصلا امکان پذیر نمی باشد عمده دلیل آن هم تحریم بانک های ایرانی توسط درگاه های رابط بین المللی می باشد.

بنابراین امروز نسخه pro این کد ها را بصورت کامل و آماده برای استفاده در اختیار شما عزیزان خواهم گذاشت.

»» نصب کتابخانه Font Awesome Pro :

برای نصب و استفاده از این آیکون ها کافیست کد زیر را در بخش head قالب خود جایگذاری کنید.

با این کار دیگر شما آماده فراخوانی فونت ها خواهید شد.

نمایش و نحوه فراخوانی آیکون های Font Awesome Pro :

برای نمایش آیکون‌های Font Awesome 5 در هرجایی از صفحه وب خود، می‌توانید از تگ i یا span کمک بگیرید و از طریق خصیصه class برای انتخاب نوع آیکون استفاده کنید.

باید دقت کنید که شما با نصب این کتابخانه دارای پنج نوع آیکون solid و brand و light و regular و doutone خواهید بود.

برای مشاهده و مقایسه تفاوت این ایکونها می توانید به لیمک زیر مراجعه کنید.

https://fontawesome.com/cheatsheet/pro/

شما برای فراخوانی هر کدام از این نوع آیکونها کلاس (class) جداگانه خواهید داشت به مثال زیر دقت کنید :

example1-for-fontawesome

برای انتخاب نوع آیکون بین 5 نوع که بالا گفتم کافیه در خصیصه class :

»» پیشوند fas برای آیکون های solid

»» پیشوند fal برای آیکون های light

»» پیشوند fad برای آیکون های doutone

»» پیشوند fab برای آیکون های brand

»» پیشوند far برای آیکون های regular

انتخاب کنید بعد نام آیکون مورد نظر را در کلاس بعدی وارد کنید. برای دسترسی به نام آیکونها باز می توانید به لینکی که در بالا گفتم مراجعه کرده و بین 5 توع از آیکون ها هر کدام را که خواستید انتخاب کنید و نام آیکون مورد نظر را بعد از fa- وارد کنید.

تغییر رنگ و سایز آیکون ها :

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

example2-for-fontawesome

سایز های از پیش تعریف شده :

فونت آیکون Font Awesome 5 بصورت پیشفرض سایز‌های از پیش تعریف شده‌ای برای آیکون‌ها در نظر گرفته که برای استفاده از این سایزها کافی است از کلاس‌های fa-xs ، fa-sm ، fa-lg و fa-2x تا fa-10x استفاده کنید:

example3-for-fontawesome.

آیکون‌های لیست :

برای جایگزینی نقطه‌های یک لیست نامرتب (ul) با فونت آیکون‌ کافیست از کلاس‌های fa-ul و fa-li استفاده کنید:

example4-for-fontawesome

آیکون‌های متحرک :

کلاس fa-spin هر آیکونی را به چرخش در می‌آورد. همچنین کلاس fa-pulse هر آیکونی را در 8 مرحله می‌چرخاند:

example5-for-fontawesome

چرخش و معکوس کردن آیکون‌ها :

کلاس‌های *-fa-rotate و *-fa-flip برای چرخش و معکوس کردن آیکون‌ها استفاده می‌شوند:

example6-for-fontawesome

آیکون‌ها با عرض برابر :

دقیقا مانند حروف و کاراکتر‌های دیگر، آیکون‌های مختلف هم دارای عرض‌های متفاوتی هستند. اگر شما در مواقعی نیاز دارید که عرض مجموعه‌ای از آیکون‌ها باهم یکسان باشند، کافیست کلاس fa-fw را به آنها بدهید.

example7-for-fontawesome

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

اگر سوال یا نطری راجب مطلب داشته باشید مدیریت سایت همیشه در خدمت شما خواهد بود.

با تشکر مدیریت سایت پگاسوس گراف.

قالب
کد و ابزار
گرافیک
- »» لایه باز 6 پست
- »» بنر لایه باز 6 پست
آموزش کد نویسی
- »» css3 5 پست
- »» html5 9 پست
محصولات
- »» قالب 5 پست
سایر

»» اینستاگرام سایت پگاسوس گراف

»» کــانـــال تلـــگرام پگاسوس گراف

join us

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

پگاسوس گراف | گرافیک با چاشنی عشق

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

ساده ترین روش استفاده از نسخه pro آیکون های font awesome تنها در دو مرحله ساده

خرید ورژن دوم قالب pegasus movie ««

آموزش تغییر متن پاسخ کامنت های رزبلاگ ««

سری دوم بنر لایه باز اختصاصی پگاسوس گراف ««

دانلود قالب چنل یاب برای رزبلاگ و بلاگ فام ««

کد دکمه باز شو برای نمایش لینک کانال تلگرام ««

سری هفتم قالب اختصاصی پگاسوس گراف برای رزبلاگ ««

خرید قالب حرفه ای و واکنشگرای پگاسوس موزیک برای رزبلاگ و بلاگ فام ««

خرید قالب اختصاصی تک صدا ««

کد جعبه دانلود باز شو سری اول ««

سری چهارم قالب آفلاین اختصاصی برای رزبلاگ و بلاگ فام ««

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

»» اینستاگرام سایت پگاسوس گراف

»» کــانـــال تلـــگرام پگاسوس گراف

نام کاربری :
ایمیل :
کد امنیتی :