illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 1785 ۲۸ اسفند ۹۳

در این مطلب میخوام یک آیکون فونت زیبا بنام 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 استفاده کنید و کاری کنید که هر وقت روی المنت مورد نظر هاور شد ، رنگ آیکون مورد نظر تغییر کنه.

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

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

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

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram