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

مراحل این آموزش به ترتیب زیره:

  1. ساخت فونت از آیکن یا لوگوی اختصاصی شما
  2. تبدیل فونت ساخته شده به فرمت svg
  3. تبدیل فایل svg به فونت آیکن
  4. اضافه کردن آیکون فونت های مورد نیاز شما از مجموعه font awsome (یا هر مجموعه دیگه ای) به فونت آیکن اختصاصی شما – گرفتن خروجی نهایی
  5. استفاده از مجموعه آیکون فونت ساخته شده در طراحی وب

مرحله اول :

ابتدا یک فایل PNG-24 از لوگومون آماده می کنیم ، سپس با استفاده از نرم افزار Font Creator میایم اون رو باز می کنیم و از منوی Tools روی گزینه Imort Image کلیک کنید و در پنجره باز شده, عکس (لوگو) ی مورد نظرتون رو انتخاب و روی Open کلیک کنید.

در مرحله بعد پنجره ای با نام Import Raster Image براتون باز میشه. در این پنجره در قسمت Smooth Filter گزینه None رو تیک دار کنید و در قسمت Threshold , در کادر عددی که سمت راست وجود داره مقدار ۲۱۳ رو وارد کنید. روی دکمه ی Generate کلیک کنید.

بعد از اتمام کار, باید فایل خروجی از فونت ساخته شده بگیریم. برای اینکار از منوی File و زیرمنوی Export Font روی گزینه ی Export as True Type/Open Type Font کلیک کنید و فونت رو در محل مشخصی سیو کنید.

مرحله دوم : 

در این قسمت قراره فایل فونت رو به فایل SVG تبدیل کنیم

برای اینکار به آدرسeverythingfonts.com/otf-to-svg برید.

سمت چپ این سایت در قسمت The EULAs of the font allow this conversion, روی دکمه ای که جلوش قرار داره کلیک کنید تا به حالت Yes دربیاد.

بعد روی دکمه ی Pick Font File کلیک کنید و فایل Otf ای که تو قسمت اول آموزش ساختیم رو وارد کنید. سپس روی دکمه Convert کلیک کنید. با کلیک روی این دکمه, بعد از چند ثانیه از شما درخواست میکنه که فایل SVG ساخته شده رو دانلود کنید. بعد از اینکه فایل دانلود شد , اون رو باز کنید و در یک محل مشخص که یادتون بمونه از حالت فشرده خارج (اکسترکت) کنید

توجه: اگر به هرعلتی موفق نشدید در سایتی که معرفی کردیم فایل SVG بسازید, میتونید با جستجوی عبارت Convert otf to SVG سایتهای مشابه رو پیدا کنید و این عملیات رو انجام بدید.

مرحله سوم :

تبدیل فایل SVG به آیکون فونت

در این مرحله با استفاده از سایت icomoon , فایل اس وی جی رو به آیکون فونت تبدیل می کنیم

ابتدا وارد سایت icomoon.io بشید. در این سایت می بینید که آیکون های زیادی از بالا تا پایین صفحه قرار دارن. شما میتونید هر کدوم از آیکن هایی که دوست دارید رو انتخاب کنید (هرتعدادی که بخواید) و با کلیک روی دکمه Generate Font اونا رو در قالب یک مجموعه (مثل Font Awsome) دانلود کنید و در طراحی وب ازشون استفاده کنید . اما اگر از قسمت اول با آموزش ما همراه بوده باشید, باید در قسمت Import Icons (بالا سمت چپ – دکمه بنفش) این سایت, فایل SVG ای که تو مرحله دوم ساختید رو انتخاب کنید تا لیستی از فایلهایتان نمایش داده شود.

مرحله چهارم:

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

در این مرحله, اگر میخواید میتونید آیکون های پراستفاده ای که معمولا تو صفحات وب مورد استفاده قرار میگیرند رو به مجموعه تون اضافه کنید. سایت icomoon خودش به صورت پیشفرض, تعداد زیادی آیکون از مجموعه های مختلف پولی و رایگان داره که میتونید با کلیک روی هر کدوم از آیکن هایی که لازم دارید, اونا رو به مجموعه نهایی خودتون اضافه کنید. پس همون صفحه ای که توش هستید رو کمی پایین بکشید و برروی لینک Add icons From Library کلیک کنید تا تمامی کتابخانه های پولی و رایگان این سایت برایتان نمایش داده بشه. سپس با انتخاب هر کتابخانه آیکون های آن را باید انتخاب کنید که میتوانید با استفاده گزینه ای در بالا سمت راست هر کتابخانه کل آیکون ها را select all/Deselect all کنید.(دقت داشته باشید که آیکون اختصاصی خودتون هم در حالت انتخاب قرار داشته باشه) و دکمه Generate Font رو فشار بدید.

بعد از اتمام دانلود, بازش کنید و در محل مشخصی اکسترکتش کنید. به محلی که فایلتون رو اکسترکت کردید برید و پوشه ای که  اسمش, icomoon هست رو باز کنید.

مرحله پنجم:

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

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

بعد از باز کردن, از عبارت font-face@ تا آخرین عبارت { قبل از تگ <style/> رو کپی کنید و در فایل استایل اصلی قالبتون وارد کنید. کدی که کپی می کنید باید به صورت زیر باشه:

1
2
3
4
5
6
@font-face {
کد های فراخوانی آیکون فونت
}
.demo-icon{
کد های استایل دهی به آیکون ها
}

دقت کنید که ابتدا و انتهای کدی که کپی می کنید دقیقا مثل کد بالا با font-face@ شروع بشه و با { تموم بشه.

حالا در همون پوشه اصلی icomoon (که تو قسمت سوم اکسترکت کرده بودید) فولدر CSS رو باز کنید و فایل style.css رو با یک نرم افزار ویرایشگر متن اجرا کنید. تو این فایل بگردید و هر گزینشگری که با icon. شروع میشه رو کپی کنید و در فایل استایل اصلی قالبتون واردش کنید.

مثلا من کد زیر رو وارد فایل استایل قالبم کردم:

1
2
3
4
5
6
7
8
.icon-A:before { content: '\e800'; } /* '' */
.icon-ok-squared:before { content: '\e801'; } /* '' */
.icon-link-ext-alt:before { content: '\e802'; } /* '' */
.icon-attach:before { content: '\e803'; } /* '' */
.icon-user:before { content: '\e804'; } /* '' */
.icon-users:before { content: '\e805'; } /* '' */
.icon-camera:before { content: '\e806'; } /* '' */
.icon-tags:before { content: '\e807'; } /* '' */

کدی که شما کپی می کنید هم باید همچین شکلی داشته باشه.?

در مرحله بعد, کد زیر رو قبل از تگ <head/> قالبتون, وارد کنید:

1
2
3
4
5
6
7
8
9
10
11
12
<script>
      function toggleCodes(on) {
        var obj = document.getElementById('icons');
        
        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }
      
    </script>

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

برای استفاده از آیکون ها در هر قسمت از قالب سایت که میخواید نمایش داده بشه کد زیر رو وارد کنید:

1
<i class="demo-icon icon-name"></i>

به جای عبارت icon-name در کد بالا, باید نام آیکون مورد نظرتون رو قرار بدید. برای پیدا کردن نام آیکون ها باید فایل demo.html رو با مرورگرتون باز کنید. بعد از باز کردن این فایل, جلوی هر آیکون, اسمش قرار داره و میتونید اونو کپی کنید و به جای عبارت icon-name در کد بالا قرار بدید.

مثال:

1
<i class="demo-icon icon-A"></i>
نظرات کاربران :

دیدگاهتان را بنویسید

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.