چطور از آیکون های SVG در سایت خود استفاده کنیم ؟؟
اگر شما از سیستم وردپرس استفاده میکنید کارتون خیلی راحت خواهد بود چون اخیرا یک پلاگین قدرتمند کامپایلر ایکون های SVG به اسم WordPress Icon SVG درست شده که شما فقط کافیه ایکون های خودتون رو انتخاب و با استفاده از شرت کات هایی که پلاگین بهتون میده از ایکون فونت های SVG استفاده کنید .
بعد از نصب و فعال کردن پلاگین خواهید دید که پنل تنظیمات اون در کنار نوار ابزار مدیریت وردپرس خواهد امد و با کلیک کردن بر روی اون وارد منوی اصلی پنل تنظیمات پلاگین شوید حال مشاهده میکنید که لیستی از ایکون فونت های SVG در منوی اصلی قرار داره که شما فقط کافیه یکی از اون ها رو انتخاب کنید به صورت خودکار پلاگین به شما کد شرت کات ایکون فونت انتخاب شده رو در بالای منوی اصلی به شما میده .
به طور مثلا من آیکون هدفون رو انتخاب کردم و خود پلاگین با اسکرون کردن به بالا کد ایکون رو به من میده .
که میتونید از این کد در قالب خودتون استفاده کنید ولی شاید از رنگ مشکی ایکون خوشتون نیاد و بخواهید رنگ اون رو عوض کنید باید بگیم که یکی از بزرگترین مزیت های این پلاگین در این هست که میتونید حتی رنگ و اندازه ایکون ها رو هم تغییر بدید اگر کمی پایین بیاید میبیند که در قسمت Tips چگونگی تغییر رنگ و اندازه ایکون آموزش داده شده .
بدین ترتیب اگر میخواهید رنگ و اندازه ایکون خودتون رو تغییر بدید به این صورت به اون استایل میدیم برای تغییر رنگ از color و برای تغییر اندازه از font-size استفاده میکنیم چون ایکون ما در واقع فونت هستش نه عکس پس باید از این عناصر برای تغییر حالت اون استفاده کنیم .
<spandata-icon=""style="color:#fff"style="font-size:16px;"></span>
خوب میبینید که این پلاگین چقدر کار مارو راحت کرده و میشه گفت یکی از ارزشمند ترین پلاگین ها برای وردپرس هستش که به صورت رایگان ارایه شده شما با استفاده از پلاگین میتونید در کمترین زمان از فونت ایکون های svg در قالب خودتون استفاده کنید و یک طراحی حرفه ایی و به روز داشته باشید .
آیا به آیکون های بیشتری نیاز دارید ؟؟
اگر ایکون های پیشفرض خود پلاگین براتون کافی نیست و یا مورد علاقه شما نبود میتونید با رفتن به سایت Icomoon در قسمت App ایکون های مورد علاقه خودتون رو انتخاب و دانلود کنید بعد از رفتن به این آدرس – کلیک کنید بر روی نوشته ” Add Icons From Library… ” کلیک کرده و کتابخانه یا دسته ایکون های خودتون رو انتخاب کنید و در زیر اونها ADD رو کلیک کنید تا اضافه بشه بعد از اون هر چند تعداد آیکون که میخواهید با کلیک کردن بر روی اونها انتخاب کنید و در آخر در پایین صفحه گزینه SVG رو بزنید تا یک پنجره پاپ آپ باز بشه حالا میتونید روی دانلود کلیک کرده تا آیکون های انتخابی خودتون در قالب یک فایل فشرده دریافت کنید .
حالا نوبت به این میرسه که ایکون هایی که دانلود کردیم رو به پلاگین خودمون اضافه کنیم و در قالب ازش استفاده کنیم دوباره به پنل تنظیمات قالب بگردید و این بار به قسمت Import a Custom Icon Pack برید و فایل فشرده ای رو که از Icomoon دریافت کردید رو در این قسمت اپلود کنید بعد از اپلود کردن پیغامی مبنی بر نصب موفقیت آمیز آیکون ها نشون داده میشه حالا به قسمت منوی اصلی پلاگین برگردید خواهید دید که آیکون هایی رو که اپلود کرده بودید در لیست آیکون فونت های خود منوی اصلی اضافه شده . امیدوارم مفید بوده باشه 
منبع : وب سایلنت
سایت زیبایی دارید
موفق باشید