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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

geomicons : آموزش استفاده از آیکونها بصورت SVG

0 1262 ۱۸ فروردین ۹۴

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

geomicons

استفاده از این آیکونها برای همگی مقدوره و بصورت رایگان هستن. همونطور که میدونید آیکونهای SVG خیلی با کیفیت هستن و بهتره که از اونا استفاده کنید و همچنین دیگه نیازی به فرستادن Request به سرور نیس و سایتتون سریعتر لود میشه. در این آموزش میخوام استفاده از آیکونهایی رو بشما آموزش بدم که کار کردن با اونا خیلی راحته و خود ابزار همه کارها رو براتون انجام میده و آیکونهای SVG رو در جای مورد نظر قرار میده.

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

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

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به geomicons.min.js نیاز داریم. این فایل رو در انتهای مطلب قرار دادم و میتونین از اون استفاده کنید.

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

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

در ابتدا باید اون المنتی که میخواید براش آیکون قرار بدین رو مشخص کنید. برای اینکار یک span قرار میدم و کلاس دلخواه js-geomicon رو بهش نسبت میدم :

حالا باید برید و آیکون مورد نظرتون رو مشخص کنید و نامشو درون خاصیت data-icon قرار بدین. برای پیدا کردن آیکون مورد نظرتون میتونین به اینجا برید و آیکون مورد نظرتون رو پیدا کنید و اسمشو کپی کنید :

geomicons1

فرش کنید من از این آیکون خوشم اومده ، اسمش که bookmark هست رو درون خاصیت data-icon قرار میدم :

بعد از اون باید در تگ اسکریپت نهایی یک متغیر بسازید ، مثلا با نام icons و تمامی آیکونها رو انتخاب کنید ، بصورت زیر :

بعد از اون باید با استفاده از متد inject اون رو به شئ Geomicons پاس بدین ، بصورت زیر :

حالا اگر در خروجی نگاه کنید ، آیکونتون در صفحه قرار داده شده. میتونین با استفاده از css روی این آیکون مدیریت کنید. با استفاده از width و height میتونین عرض و ارتفاع این آیکونها رو تغییر بدین :

با استفاده از خاصیت color هم میتونین رنگ آیکونها رو تغییر بدین. برای مثال میخوام وقتی روی آیکونها هاور میشه ، رنگشون قرمز بشه :

بهمین سادگی.

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

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

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram