ساخت آیکون فونت اختصاصی به سادگی

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

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

1انتخاب فونت ها

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

custom-icon-font-1

بعد از انتخاب آیکون های مدنظرتان از قسمت پایین صفحه سمت راست روی گزینه Generate Font کلیک کنید. در صورتی که می خواهید آیکون ها در فرمت های دیگر (مثلا SVG، PNG و …) ساخته شوند، از پایین صفحه گزینه سمت چپ را کلیک نمایید.

custom-icon-font-2

2تولید فونت و آیکون ها

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

custom-icon-font-3

3نحوه استفاده از فونت ها

در صورتی که نشانگر ماوس را مطابق تصویر زیر روی یکی از فونت ها در این صفحه ببرید، گزینه Get Code نمایان خواهد شد.

custom-icon-font-4

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

custom-icon-font-5

امیدواریم این آموزش برای شما مفید بوده باشد.

یک دیدگاه

  1. hossein گفت:

    خدا خیرت به عالی بود

سوال یا دیدگاه شما