آموزش ساخت فونت آیکون + استفاده از فونت آیکون در فتوشاپ و صفحات وب

در این مقاله با ساخت فونت آیکون (font icon) آشنا خواهیم شد و استفاده از فونت آیکون ساخته شده را به صورت کامل توضیح خواهیم داد.

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

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

استفاده و ساخت فونت آیکون ها مسائل پیچیده مربوط به آیکون ها را بسیار کاهش داده و استفاده از آیکون های متنوع در مکان های مختلف را سهولت می بخشد.

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

1. کم حجم بودن
2. به ازای هر ایکون یک فایل نمیدهد.
3. قابلیت تغییر اندازه، تغییر رنگ، و انواع کارهایی که روی نوشته می شود انجام داد در فونت آیکون نیز میشود.
4. سرعت بالا نصبت به لود تصویر
5. مناسب برای استفاده در طراحی واکنش گرا
6. پشتیبانی در تمام مرورگرها
7. استایل دهی به فونت آیکون ها توسط CSS

نحوه ساخت فونت آیکون

برای ساخت فونت آیکون جدید به سایت Fontello.com رفته آیکون های موردنظر را انتخاب کرده سپس گزینه ای ِDownload web font انتخاب کرده فایل را دانلود کنید.

سپس در قسمت دانلود های فایل را Extract files کرده سپس از قسمت فونت گزینه Font.ttf را باز کرده سپس install را انتخاب نمایید.

معرفی وب سایت Fontello

پروژه ای متن باز که شامل صدها icon می باشد که قابلیت های جالبی را نیز بصورت رایگان در اختیار استفاده کنندگان قرار می دهد.

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

هرچند وب فونت های زیادی موجود می باشد، اما هر کدام از این وب فونت ها آیکون های متفاوت و زیبایی دارند.

وب فونت Fontello.com نیز با دارا بودن قابلیت زیاد بدون شک شما را جذب خواهد کرد.

تبدیل آیکون دلخواه به font icon در Fontello

اگر آیکونی مدنظرتونه که در Fontello وجود ندارد ، فایل SVG آیکون مورد نظر را در Fontello بارگذاری نمایید تا به لیست آیکون های شما اضافه شود.

برای این کار کافیست فایل SVG دانلود شده خود را به صورت drag & drop در سایت Fontello به قسمت “Drag custom SVG icons or SVG font here” اضافه کنید.

نکته: اگر هنگام بارگذاری فایل SVG در Fontello با خطا مواجه شدید و آیکون شما را نمایش نداد با استفاده از ابزارهای آنلاین تبدیل یا ویرایش فایل SVG می توانید فایل SVG خود را بهینه کرده و مجددا امتحان نمایید.

ویرایش و ساخت فایل های SVG تحت وب : https://editor.method.ac

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

نصب font icon بر روی سیستم عامل همانند سایر فونت های نوشتاری بوده و تفاوت خاصی ندارد.

فقط کافیست بر روی فایل با فرمت ttf در پوشه فونت راست کلیک کرده و گزینه install را بزنید.

استفاده از Font icon در فتوشاپ

بعد نصب فایل ttf قسمت demo.html را در باز کرده آیکون مورد نظر را انتخاب کرده و کپی کنید.

سپس در فتوشاپ در قسمت مورد نظر ابزار type را انتخاب کرده و یک لایه جدید ایجاد گنید سپس آیکون انتخابی را Paste نمایید.

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

استفاده از فونت آیکون در صفحات وب

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

در حالت کلی استفاده از فونت آیکون در صفحات وب کار سختی نیست و تنها با فراخوانی ۱ فایل CSS در صفحه وب مورد نظرمان می توانیم از فونت آیکون ها استفاده نماییم.

برای استفاده از فونت آیکون در صفحات وب مراحل زیر را طی کنید :

۱- پوشه دانلود شده را تغییر نام داده و در کنار پروژه خود قرار دهید.

۲- فایل html مورد نظر خود را ویرایش کرده و کد زیر را در داخل تگ head قرار دهید.

توجه : در قسمت href مسیر فایل css خودتون رو قرار بدید. چون فایل icon.css نسبت به اسمی که شما برای فونت آیکون خود انتخاب کردید متفاوت هست.

حال فایل demo.html را در مرورگر باز کنید تا لیست آیکون ها به همراه اسمشون رو بتونید مشاهده کنید.

نام هر آیکونی که میخواهید استفاده کنید و کپی کنید و به عنوان class به المان span و یا i بدید. به صورت زیر :

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