آموزش استفاده از ایکون های SVG در وردپرس

دسته‌بندی:
یک دیدگاه
نویسنده: علی باقری نیا
تاریخ: ۲۳,اردیبهشت,۱۳۹۳
آخرین ویرایش: ۰۱ مهر ۱۳۹۷
یک دیدگاه
تصاویر SVG رو میشه به نسل بعدی فرمت های استاندارد ...

امتیاز دهید :

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
تصاویر SVG رو میشه به نسل بعدی فرمت های استاندارد و حرفه ایی تحت وب دانست واژه SVG مخفف Scalable Vector Graphics به معنای «تصاویر برداری مقایس‌پذیر» است. ساختار این تصاویر بر اساس قالب بندی XML است و تصاویر و اشکال موجود در آن‌ها با استفاده از محاسبات ریاضی توسط رایانه روی صفحه‌ نمایش رسم می‌شود. به زبان ساده‌تر، تصاویر SVG چون بر مبنای عدد و نسبت هستند، به پیکسل‌ها وابستگی‌ای ندارند و در هر مقیاسی بدون افت کیفیت نمایش داده می‌شوند. تصاویر SVG توسط کنسرسیوم جهانی وب به صورت یک استاندارد پذیرفته شده‌اند و هم اکنون حدود ۸۵٪ از مرورگرهای موجود از آن‌ها پشتیبانی می‌کنند.

چطور از آیکون های SVG در سایت خود استفاده کنیم ؟؟

اگر شما از سیستم وردپرس استفاده میکنید کارتون خیلی راحت خواهد بود چون اخیرا یک پلاگین قدرتمند کامپایلر ایکون های SVG به اسم WordPress Icon SVG درست شده که شما فقط کافیه ایکون های خودتون رو انتخاب و با استفاده از شرت کات هایی که پلاگین بهتون میده از ایکون فونت های SVG استفاده کنید .

دانلود پلاگین از مخزن وردپرس

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

به طور مثلا من آیکون هدفون رو انتخاب کردم و خود پلاگین با اسکرون کردن به بالا کد ایکون رو به من میده .

تصویر

که میتونید از این کد در قالب خودتون استفاده کنید ولی شاید از رنگ مشکی ایکون خوشتون نیاد و بخواهید رنگ اون رو عوض کنید باید بگیم که یکی از بزرگترین مزیت های این پلاگین در این هست که میتونید حتی رنگ و اندازه ایکون ها رو هم تغییر بدید اگر کمی پایین بیاید میبیند که در قسمت Tips چگونگی تغییر رنگ و اندازه ایکون آموزش داده شده .

تصویر

بدین ترتیب اگر میخواهید رنگ و اندازه ایکون خودتون رو تغییر بدید به این صورت به اون استایل میدیم برای تغییر رنگ از color و برای تغییر اندازه از font-size استفاده میکنیم چون ایکون ما در واقع فونت هستش نه عکس پس باید از این عناصر برای تغییر حالت اون استفاده کنیم .


خوب میبینید که این پلاگین چقدر کار مارو راحت کرده و میشه گفت یکی از ارزشمند ترین پلاگین ها برای وردپرس هستش که به صورت رایگان ارایه شده شما با استفاده از پلاگین میتونید در کمترین زمان از فونت ایکون های svg در قالب خودتون استفاده کنید و یک طراحی حرفه ایی و به روز داشته باشید .

آیا به آیکون های بیشتری نیاز دارید ؟؟

اگر ایکون های پیشفرض خود پلاگین براتون کافی نیست و یا مورد علاقه شما نبود میتونید با رفتن به سایت Icomoon در قسمت App ایکون های مورد علاقه خودتون رو انتخاب و دانلود کنید بعد از رفتن به این آدرس – کلیک کنید بر روی نوشته ” Add Icons From Library… ” کلیک کرده و کتابخانه یا دسته ایکون های خودتون رو انتخاب کنید و در زیر اونها ADD رو کلیک کنید تا اضافه بشه بعد از اون هر چند تعداد آیکون که میخواهید با کلیک کردن بر روی اونها انتخاب کنید و در آخر در پایین صفحه گزینه SVG رو بزنید تا یک پنجره پاپ آپ باز بشه حالا میتونید روی دانلود کلیک کرده تا آیکون های انتخابی خودتون در قالب یک فایل فشرده دریافت کنید .

تصویر

حالا نوبت به این میرسه که ایکون هایی که دانلود کردیم رو به پلاگین خودمون اضافه کنیم و در قالب ازش استفاده کنیم دوباره به پنل تنظیمات قالب بگردید و این بار به قسمت Import a Custom Icon Pack برید و فایل فشرده ای رو که از Icomoon دریافت کردید رو در این قسمت اپلود کنید بعد از اپلود کردن پیغامی مبنی بر نصب موفقیت آمیز آیکون ها نشون داده میشه حالا به قسمت منوی اصلی پلاگین برگردید خواهید دید که آیکون هایی رو که اپلود کرده بودید در لیست آیکون فونت های خود منوی اصلی اضافه شده . امیدوارم مفید بوده باشه ;)

منبع : وب سایلنت

  • نویسنده
    علی باقری نیا
  • تعداد بازدید
    310 views
۱دیدگاه فرستاده شده است.
شما هم دیدگاه خود را بنویسید

Time limit is exhausted. Please reload CAPTCHA.

آموزشگاه

با عضویت در خبرنامه، تازه‌ترین نوشته‌های وبلاگ را در ایمیل‌تان دریافت کنید.
برای عضویت نشانی ایمیل خود را وارد کرده و بر روی دکمه عضویت کلیک نمایید.