آموزش ساخت آیکون فونت های اختصاصی – قسمت سوم – ساخت مجموعه آیکون فونت نهایی

1371 بازدید
چهارشنبه ۲۵ شهریور ۱۳۹۴
آموزش ساخت آیکون فونت های اختصاصی - قسمت سوم - ساخت مجموعه آیکون فونت نهاییReviewed by جواد نبوی on Sep 16Rating: 5.0

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

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

در این مرحله با استفاده از سایت Fontello , فایل اس وی جی رو به آیکون فونت تبدیل می کنیم (البته مرحله چهارم این آموزش هم برای اضافه کردن آیکون های دیگه و گرفتن خروجی با همین سایت سر و کار داریم).

ابتدا وارد سایت Fontello.com بشید. در این سایت می بینید که آیکون های زیادی از بالا تا پایین صفحه قرار دارن. شما میتونید هر کدوم از آیکن هایی که دوست دارید رو انتخاب کنید (هرتعدادی که بخواید) و با کلیک روی دکمه Download Webfont اونا رو در قالب یک مجموعه (مثل Font Awsome0) دانلود کنید و در طراحی وب ازشون استفاده کنید. اما اگر از قسمت اول با آموزش ما همراه بوده باشید, باید در قسمت Costume Icons این سایت, فایل SVG ای که تو مرحله دوم ساختید رو با دراگ کردن به کادر Drag custom SVG icons or SVG font here بکشونید.

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

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

در تصویر بالا علاوه بر آیکون خودتون, تعدادی مربع(یا مستطیل), اعداد و علامت میبینید که ما به اونا نیازی نداریم و کاری هم باهاشون نداریم. تنها کاری که باید بکنیم اینه که, با یک کلیک آیکون خودمون رو به حالت انتخاب دربیاریم.

 

مرحله چهارم:اضافه کردن آیکون فونت های مورد نیاز شما از مجموعه font awsome (یا هر مجموعه دیگه ای) — گرفتن خروجی نهایی

در این مرحله, اگر میخواید میتونید آیکون های پراستفاده ای که معمولا تو صفحات وب مورد استفاده قرار میگیرند رو به مجموعه تون اضافه کنید. سایت Fontello خودش به صورت پیشفرض, تعداد زیادی آیکون از مجموعه های Font Awsome , Fontelico , Entypo , Modern Pictograms و … داره که میتونید با کلیک روی هر کدوم از آیکن هایی که لازم دارید, اونا رو به مجموعه نهایی خودتون اضافه کنید. پس همون صفحه ای که توش هستید رو کمی پایین بکشید و آیکون هایی که قراره در صفحه وبتون ازش استفاده کنید رو انتخاب کنید(دقت داشته باشید که آیکون اختصاصی خودتون هم در حالت انتخاب قرار داشته باشه) و دکمه Download Webfont رو فشار بدید. بعدش پنجره ای باز میشه که از شما میخواد فایل آیکون فونت نهایی رو دانلود کنید و شما هم باید تایید کنید. بعد از اتمام دانلود, بازش کنید و در محل مشخصی اکسترکتش کنید. به محلی که فایلتون رو اکسترکت کردید برید و پوشه ای که اول اسمش, fontello هست رو باز کنید. تو این پوشه یک فایل html با نام Demo.html قرار داره که اگه بازش کنید میتونید پیش نمایشی از آیکون هایی که میتونید ازشون استفاده کنید به همراه کد فراخوانیشون ببینید.

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

قسمت های قبلی این آموزش:

قسمت بعدی این آموزش:

 

تبلیغات

نویسنده (مدیر سایت)

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

2 دیدگاه برای “آموزش ساخت آیکون فونت های اختصاصی – قسمت سوم – ساخت مجموعه آیکون فونت نهایی”

  1. شقايق گفت:

    واقعاً از توضيحاتي كه دادين سپاسگذارم. دعاتون ميكنم موفق و مويد باشيد در پناه خدا✋?

    1. جواد نبوی گفت:

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

پاسخ دهید

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