ionicons : معرفی و آموزش استفاده از آیکون فونتی عالی ( icon font )

- visibility ٠ mode_comment

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

ionicons

همونطور که اطلاع دارید برای طراحی سایت از آیکونهای زیادی استفاده میشه. شاید در یک سایت بطور مثال 50 آیکون استفاده بشه ، بنابراین مرورگر برای نمایش سایت شما ، 50 درخواست به سرور میفرسته. تعداد بالای درخواستها باعث میشه که سایتتون کندتر Load بشه و کاربرانتون راضی نباشند. تکنیکهای متفاوتی برای رفع این مشکل وجود داره. مانند CSS Sprite و Icon Font و ....

من در این مطلب نحوه استفاده از یک آیکون فونت خوب و زیبا رو براتون توضیح میدم. این آیکون فونت از IE8 به بالا پشتیبانی میکنه.

میبینید که تعدادی آیکون قرار داده شده و وقتی روی اونا هاور میکنید ، رنگشون تغییر میکنه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به ionicons.min.css و فونتهای زیر :

  • ionicons.eot
  • ionicons.svg
  • ionicons.ttf
  • ionicons.woff

نیاز داریم. این فایلهارو رو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایل مورد نظر رو وارد کردیم.

در ابتدا باید فایل CSS مربوطه رو در قسمت head قرار بدین. برای اینکار میتونین اونو دانلود کرده و بصورت زیر قرار بدین :

یا میتونین از نسخه CDN اون استفاده کنید :

همونطور که دیدین این فایل CSS رو درون پوشه css  قرار دادیم. حالا باید فونتهامون هم درون پوشه fonts قرار بدیم. اگر بخواین این ترتیب قرار گیری رو تغییر بدین ، باید برید و آدرس نسبی بین فایل CSS و فونتهارو در فایل ionicons.min.css ویرایش کنید.

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

میبینید که ما یک li قرار دادیم. حالا میتونیم یک سری کد CSS برای اون بنویسیم. بصورت زیر :

میبینید که از transform و transition برای این li استفاده کردیم تا ظاهرش جالبتر بشه. حالا باید به این صفحه برید و آیکون مورد نظرتون رو پیدا کنید و روش کلیک کنید :

 

ionicons1

این چیزی که دورش کادر کشیدم نام این آیکون خاص هست. حالا باید به li مورد نظرتون کلاس مورد نظر رو اضافه کنید :

میبینید که نام آیکون رو در نام کلاس این li قرار دادیم. حالا اگر در خروجی مشاهده کنید ، این آیکون قرار گرفته.

برای کوچک و یا بزرگ کردن این آیکون باید font-size اون li رو کم یا زیاد کنید.

برای عوض کردن رنگ آیکونها میتونین از color استفاده کنید و کاری کنید که هر وقت روی المنت مورد نظر هاور شد ، رنگ آیکون مورد نظر تغییر کنه.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.