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

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

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="http://up.pegasusgraph.ir/view/3301427/font-awesome-pro_pegasusgraph_ir.css">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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