فونت آیکون چیست، چرا باید از آن استفاده کنیم و معرفی فونت آیکون های زیبا

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

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

فونت آیکون چیست

فونت آیکون ها، مفهوم جدیدی از فونت را معرفی کردند. در گذشته برای استفاده از آیکون های مختلف در صفحات وب و اپلیکیشن های موبایل لازم بود تا با نرم افزارهایی مانند فتوشاپ، آیکون های مد نظر را تک به تک ایجاد کرد. همچنین این امکان وجود داشت (هنوز هم وجود دارد!) که از فایل های SVG استفاده کرد. هر دو روش دارای مشکلاتی اساسی برای یک طراح و توسعه دهنده بودند. اول اینکه اگر تغییری روی رنگبندی یا طرح آیکون نیاز بود، لازم بود آیکون های به زحمت طراحی شده مجدد ویرایش شوند. در هنگام استفاده از SVG ها نیز مشکلاتی نظیر محدودیت در رنگبندی و گنجاندن آنها در بخش های مختلف وجود داشت.

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

چرا باید از فونت آیکون استفاده کنیم

فونت آیکون ها تغییرات عمده ای در صفحات وب و اپلیکیشن های موبایل ایجاد کردند. در صفحات وب، سرعت و حجم صفحه از اهمیت بالایی برخوردار است. یکی از راه های کاهش حجم صفحات وب، کش کردن آنهاست. کش کردن فونت ها، بسیار آسان تر از تصاویر است. با استفاده از فونت ها، تعداد درخواست های صفحه جهت بارگذاری تصاویر (آیکون ها) به ۳ یا ۴ فایل کاهش می یابد. همچنین استفاده از فونت ها میزان خواندن/نوشتن روی سرور را کاهش می دهد که منجر به کاهش مصرف پهنای باند در سایت های پربازدید خواهد شد.

یکی دیگر از فواید استفاده از فونت ها امکان استفاده از آنها در بخش هایی مانند سلکتورها (Selector) در صفحات وب است. برای مثال سلکتورهای :after و :before با استفاده از فونت آیکون ها می توانند جهت نمایش صحیح آیکون ها مورد استفاده قرار گیرند.

آیکون ها به صفحات وب و موبایل، جلوه ویژه ای می دهند. همچنین در بسیاری از موارد آیکون ها تجربه کاربری صفحه را نسبت به متون و محتوای نوشتاری، بهبود می دهند. برای درک بهتر، ایموجی ها را در نظر بگیرید. استفاده از یک ایموجی برای بیان حالت خوشحالی یا نشان دادن حالت تعجب، تاثیر بیشتری از نوشتن یک متن دارد.

بکارگیری فونت آیکون ها امکان استفاده از صدها یا هزاران آیکون را در قالب یک فایل چند ده کیلوبایتی فراهم می کند. در مقایسه با فایل های PNG و SVG که در گذشته استفاده می شد (هنوز هم برخی از طراحان استفاده می کنند!) این فایل ها بسیار کم حجم تر و بهینه تر هستند.

معرفی فونت آیکون های محبوب و خوش ساخت

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

بسته اول: Material icons

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

همچنین Material icons فایل های SVG و PNG آیکون ها را به طراحان ارائه می دهد که در مواردی که استفاده از فونت ها امکان پذیر نیست، بسیار حائر اهمیت است. Material icons قابلیت استفاده در برنامه های اندروید و iOS را نیز داراست.

در اقدامی جالب توجه، امکان استفاده از این فونت برای زبان های راست به چپ مثل پارسی نیز فراهم است. این مورد برای تولید برنامه های دو یا چند زبانه کاربرد بالایی دارد.

در این صفحه می توانید مستندات Material icons را مشاهده کنید.

بسته دوم: Line Icons

Line Icons یکی دیگر از بسته های فونت آیکون زیبای موجود در وب است که با توجه به ظرافت آیکون های آن مورد توجه قرار گرفته است. Line Icons بیش از ۴۵۰ آیکون ارائه می دهد که در قالب فایل های فونت و SVG قابل دریافت است.

Line Icons کاملا رایگان است و با توجه به حجم کم و طراحی نازک آیکون ها، در تولید صفحات با کیفیت توانایی بالایی دارد.

بسته سوم: Themify

Themify دارای بیش از ۳۲۰ آیکون است که بیشتر آنها از آیکون های iOS نسخه ۷ و با دقت بالایی طراحی شده اند. Themify نیز کاملا رایگان است و در ۲ نسخه در اختیار کاربران قرار می گیرد. علاوه بر امکان دانلود و استفاده از Themify به صورت فونت، می توان از آن در وردپرس نیز به صورت افزونه استفاده کرد.

بسته چهارم: Zond Icons

Zond Icons با اینکه فونت نیست اما به دلیل آیکون های زیبا، در نرم افزار های تحت وب زیادی مانند ویرایشگر های پیشرفته متن استفاده شده است. Zond Icons در قالب SVG ارائه شده و از کیفیت بسیار بالایی برخوردار است، اما متاسفانه از سال ۲۰۱۷ بروزرسانی نشده است.

بسته پنجم: OPEN ICONIC

OPEN ICONIC دارای بیشتر ۲۲۰ آیکون است که در قالب فونت و فایل SVG قابل دریافت است. نقطه قوت OPEN ICONIC حجم بسیار کم فایل های آن است. همچنین هماهنگی با فریمورک های محبوبی نظیر بوت استرپ و Foundation، آن را به یکی از انتخاب های مناسب برای صفحات وب و موبایل تبدیل کرده است.

بسته ششم: Line Awesome

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