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

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



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

svgicons : نحوه قرار دادن آیکون های SVG زیبا در وبسایت

10 2377 ۷ فروردین ۹۴

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

svgicons

با استفاده از این ابزار میتونین آیکونهای زیبایی رو بصورت SVG در سایت خودتون قرار بدین. همونطور که میدونید اگر از تصاویر SVG استفاده کنید ، هر چقدر هم که صفحه رو زوم کنید ، کیفیت اون تغییری نمیکنه ، چونکه تصاویر SVG وکتور و برداری هستن.  با این روشی که امروز میگم دیگه نیازی نیست که به سرور درخواست ( Request ) فرستاده بشه و همه رو بصورت کدهای SVG در سندمون قرار میدیم.

همونطور که در فایل دمو میبنید ، چند آیکون بصورت SVG قرار داده شده که اگر روی اونا هاور کنید تغییر رنگ میدن و اگر صفحه رو هم زوم کنید کیفیتشون کاهش پیدا نمیکنه.

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

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

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

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

در ابتدا باید فایل svgicons.css رو در قسمت head اضافه کنید ، بصورت زیر :

اگر این فایل رو باز کنید کدهای زیر رو خواهید دید :

میبینید که برای کلاس svg-icon کد زیر رو قرار دادیم :

با استفاده از این کد میتونین عرض و ارتفاع آیکونها رو تغییر بدین. من در بالا 3em قرار دادم.

با استفاده از کدهای دیگه هم میتونین رنگ آیکونها و همچنین رنگ آیکونها در زمان هاور رو مشخص کنید.

حالا باید به سایت اصلی برید و آیکون مورد نظرتون رو پیدا کنید :

svgicons1

فرض کنید که من آیکون بالا رو انتخاب کردم ، حالا روی اون کلیک میکنم :

svgicons2

روی اون که کلیک کنید ، این پنجره باز میشه و حالا میتونین کدهای مورد نظر رو کپی کنید و در سایت خودتون قرار بدین. کدهای بالا بصورت زیر هست :

حالا باید این کد رو در کدهای خودتون قرار بدین. بعد از اینکه کدها رو قرار دادین ، بصورت زیر خواهد بود :

بهمین راحتی.

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

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

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

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

دیدگاه ها 10 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    عالی بود بسیار ممنون

  • ‏‏

    واقعا عالی بود

  • ‏‏

    سلام
    این اموزش رو به صورت ویدئویی قرار بدین

  • ‏‏

    سلام مرسی بابت معرفی این سایت
    چطور میشه مثل این سایت وکتور های دو رنگ داشت
    http://tutsplus.github.io/Styling-Iconic/theming/index.html
    تو قسمت Theme گزینه slate
    با سپاس

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram