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

- visibility ۱۰ mode_comment

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

svgicons

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

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

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

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

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

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

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

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

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

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

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

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

svgicons1

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

svgicons2

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

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

بهمین راحتی.

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

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

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

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

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

محمد اسفندیاری

موفق باشید دوست عزیز

آربی

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

محمد اسفندیاری

خوشحالم که بدردتون خورده
موفق باشید

mal2moh

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

وحید صالحی

سلام توضیحات واضحه دوست عزیز طبق آموزش عمل کنید مطلب و مورد خاص و پیچیده ای نداره…

محمد اسفندیاری

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

galboy

تشکر…! ❓

محمد اسفندیاری

سلام دوست عزیز خواهش میکنم
موفق باشید

علی

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

نیاز به لاگین

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