Font Awesome چیست و چگونه از آن استفاده کنیم

Font Awesome

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

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

نحوه استفاده

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

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

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

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

فیسبوک توییتر گوگل + لینکداین تلگرام واتس اپ کلوب