معرفی ابزار طراحی فونت آسم

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

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

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

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

و بر روی لینک no thanks,just download Font Awesome کلیک نمایید.

پس از دانلود ، فایل زیپی را دریافت می نمایید. جهت استفاده از ابزار فونت آسم فایل فشرده را از اکسترکت کنید تا محتویات فایل برای شما قابل دسترس باشد. حال از پوشه css فایل font-awesome.min.css را کپی و در پوشه css قالب خود paste نمایید. همچنین از فایل اکسترکت شده، مقادیری که در پوشه fonts وجود دارد را کپی کرده و در پوشه ی fonts قالب خود قرار می دهید.

بعد فایل صفحات قالب خود را باز کنید (مثلا index.html) ، و سپس در بین تگ <head> کد زیر را وارد کنید:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

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

<i class="fa fa-iconname"></i>

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

همچنین در منوی سایت با زدن گزینه Example می توانید مثال هایی از کلاس های متفاوت فونت آسم مشاهده کنید.