طراحی وب

Font Awesome چیست و چگونه از آن استفاده کنیم [بروزرسانی: معرفی نسخه ۵]

در طراحی وب به سبک مدرن استفاده از آیکون برای بخش های مختلف یک وب سایت علاوه بر زیبایی یک شناسه یا نماد معرفی برای عناصر صفحه محسوب می شود. در گذشته به منظور نمایش آیکون ها از تصاویر استفاده می شد. در این روش طراح ملزم به طراحی آیکون های مختلفی برای وب سایت بود که علاوه بر صرف وقت زیاد برای طراحی، مشکلاتی نظیر عدم حفظ کیفیت در اندازه های مختلف صفحه نمایش را نیز به دنبال داشت. در این مقاله به معرفی بسته فونت آیکون Font Awesome خواهیم پرداخت.

با پیشرفت و توسعه بازار طراحی وب سایت و نیاز به اجرای سریع پروژه ها نسل جدیدی از آیکون ها در قالب فونت های قابل استفاده در وب بوجود آمدند که علاوه بر کاهش زمان طراحی، جهت نمایش در صفحه هایی با اندازه ها مختلف بدون افت کیفیت قابل استفاده باشند. Font Awesome یکی از این فونت-آیکون هاست که هم اکنون بیش از ۶۰۰ آیکون مختلف در زمینه ها و دسته های کاربردی متفاوت را برای طراحان فراهم آورده است.

Font Awesome یک پروژه رایگان است و می توان در هر نوع وب سایتی از آن استفاده نمود. جهت استفاده از این فونت-آیکون کافی است فایل حاوی فونت و استایل آن را دریافت نموده و به وب سایت خود الحاق نمایید.

نحوه استفاده از Font Awesome

برای استفاده از Font Awesome با دریافت بسته فونت و استایل از این آدرس شروع کنید. پس از دریافت بسته و خارج کردن آن از حالت فشرده ۴ پوشه با نام های CSS، Fonts، LESS و SCSS مشاهده می کنید که کافی است برای شروع پوشه های CSS و Fonts را به پروژه خود منتقل کرده و فایل “font-awesome.min.css” را به پروژه خود الحاق نمایید.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

آیکون های موجود در این فونت-آیکون را می توانید در این صفحه مشاهده نمایید. برای استفاده از این آیکون ها در پروژه خود، کافیست در مکان مورد نظر از کد زیر استفاده نمایید:

<i class="fa fa-icon-name" aria-hidden="true"></i>

در قطعه کد بالا کافیست به جای “fa-icon-name” نام آیکون مورد نظر را وارد نمایید. برای مثال: fa-heart. همچنین می توانید اندازه فونت ها را از طریق css وب سایت خود تغییر داده و به اندازه دلخواه برسید.

از مزایای استفاده از Font Awesome می توان به افزایش سرعت بارگذاری سایت به علت کاهش تعداد تصاویر، بهینه شدن پوسته وب سایت برای اندازه صفحه های متفاوت و عدم کاهش کیفیت و یا به هم ریختگی پوسته با تغییر اندازه صفحه نمایش اشاره کرد. علاوه بر این، Font Awesome با دارا بودن بیش از ۶۰۰ فونت با دسته های مختلف می تواند پاسخگوی قدرتمندی برای نیازهای مختلف طراحان باشد. همچنین Font Awesome دارای فایل های LESS و SASS نیز می شود که طراحی را برای طراحان حرفه ای ساده تر می کند.

بروزرسانی

با ارائه نسخه جدید Font Awesome لازم می دانیم نحوه استفاده از این بسته فونت آیکون را خدمت دوستان و همراهان گرامی شرح دهیم.

نحوه استفاده از Font Awesome

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

پنل کاربری Font Awesome

در این صفحه با کلیک روی گزینه Manage Kits و ساخت یک کیت جدید امکان استفاده از بسته فونت ها برای شما فراهم خواهد شد.

برای استفاده در پروژه می توانید قطعه کدی که برای شما ساخته می شود را در تگ head سایت خود وارد نمایید.

نمونه کد:

<head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/7b1kc80056.js"></script>
</head>

آیکون ها

آیکون ها در نسخه جدید Font Awesome به ۵ دسته تقسیم شده اند. در نسخه جدید آیکون های شبکه های اجتماعی از بسته اصلی جدا شده و به عنوان Font Awesome Brands شناخته می شود. همچنین آیکون های اصلی به ۴ دسته Solid، Regular، Pro و Duotone تقسیم شده اند که نسخه های Regular، Pro و Duotone شامل هزینه و Solid رایگان است.

در بسته Solid بیش از ۹۵۰ آیکون به صورت رایگان قابل استفاده است. همچنین در بسته Regular نیز ۱۵۱ آیکون رایگان و مابقی شامل هزینه هستند. در کل می توان اصلی ترین تفاوت میان بسته ها را میزان ظرافت یا نازکی آیکون ها دانست. البته نسخه Pro دارای ۱۶۴۸ آیکون است.

در نسخه های جدید بسته ای با نام Duotone به Font Awesome اضافه شده که آیکون ها را به حالت دو رنگ نمایش می دهد. می توان گفت آیکون های این بسته در بخش های مختلف، دارای کنتراست متفاوتی هستند. البته این بسته نیز رایگان نیست و شامل دریافت هزینه می شود.

بکارگیری

جهت بکارگیری این آیکون ها در پروژه های طراحی وب، مانند گذشته می توان از تگ زیر استفاده کرد:

<i class="fa fa-icon-name"></i>

با این تفاوت که می توان مشخص نمود قصد استفاده از کدام بسته را دارید. برای مثال اگر بخواهید از بسته Solid آیکونی نمایش داده شود، کد زیر را استفاده می کنیم:

<i class="fas fa-icon-name"></i>

برای بسته Brands:

<i class="fab fa-icon-name"></i>

و برای بسته Regular:

<i class="far fa-icon-name"></i>

جهت مشاهده مستندات می توانید به این صفحه مراجعه نمایید.

جایگزین های Font Awesome

با به اصطلاح پولی شدن Font Awesome و اعمال سیاست هایی که استفاده از این فونت آیکون را برای ایرانیان سخت کرده (با IP ایران کیت فونت به سختی فراخوانی می شود)، می توان از جایگزین هایی به مراتب زیباتر و خوش ساخت تر از Font Awesome استفاده نمود. تعدادی از این فونت آیکون ها را می توانید در مقاله فونت آیکون چیست، چرا باید از آن استفاه کنیم و معرفی فونت آیکون های زیبا در ایرانووب مشاهده نمایید.

برچسب ها

ایرانووب

متولد 1368، طراح و توسعه دهنده وب، عاشق کدنویسی، ایده پردازی دیجیتال و بازی های ویدئویی!!!

‫۲ نظرها

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
بستن
بستن