تعداد بازدید: 1861

آموزش کار با icomoon (آیکومون) قسمت اول

در این مقاله قصد داریم تا نحوه استفاده از icomoon (آیکومون) را باهم بررسی کنیم بطوری که بتونید با آیکون های زیادی کار کنید و یا خودتون بوسیله فایل svg آیکون بسازید.
اگر شما طراح و یا حتی توسعه دهنده وبسایت باشید حتما با آیکون های زیادی مثل font awesome یا dashicon کار کرده اید. در این مقاله قصد داریم تا با آیکون های جدیدی آشنا بشیم که کمی متفاوت و در عین حال منعطف تر از سایر آیکون ها است.

افزودن آیکن به icomoon (آیکومون)

برای شروع کار باید به سایت  https://icomoon.io  بروید و گزینه  IcoMoon App را از قسمت سمت راست سایت  انتخاب کرده و وارد صفحه ای می شویم مطابق شکل که می توانیم آیکون های مورد نظر خود را انتخاب کنیم.

 

icomoon toturial - gnutec

 

گزینه Add Icons From Library… را انتخاب کرده توجه داشته باشید بعضی از آیکون ها پولی هستند وشما فقط می توانید کتابخانه های رایگان را لود کرده و از آنها استفاده کرد.
با انتخاب گزینه add می تواتید هر تعداد کتابخانه را لود کرده و از آیکون های آن ها استفاده کرده.
البته بدون نیاز به لود کتابخانه با سرچ هم می توانید آیکون های مورد نظر را پیدا کرده و انتخاب کنید.

 

icomoon icons -gnutec

 

بعد از import کتابخانه آیکون ها را مانند شکل می توانید مشاهده کنید.

 

icomoon toturial -gnutec

 

بعد از انتخاب آیکون های مورد نظر از قسمت  Selection در انتهای صفحه می توان تعداد آیکون انتخابی را مشاهده کرد و برای ساخت لیست آیکون های اختصاصی گزینه Generate Font را انتخاب کرده و سپس گزینه  دانلود Download  را انتخاب کنید.

استفاده نهایی از icomoon (آیکومون) در وبسایت:

حال به نحوه استفاده از این فایل ها می رسیم. وقتی دکمه دانلود را انتخاب کردید فایل بنام  icomoon
برای شما ذخیره شده  این فایل  زیپ شده شامل چند بخش است که ما فقط به فولدر fonts و فایل style.css نیاز داریم . فونت ها را در مسیر دلخواه پروژه خود قرار دهید و کدهای سی اس اس را هم به استایل ها اضافه کنید.
دقت کنید که آدرس دهی درurl  استایل درست باشد.
این نمونه کد :

 

مطالب مشابه

ویرایشگر براکت brackets - توضیحات

ویرایشگر براکت Brackets

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

اشتراک گذاری :

حمیده عابدی

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

3 دیدگاه برای آموزش کار با icomoon (آیکومون) قسمت اول

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

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