به نام خدا پویانماییهای ایرانی

در این وبلاگ به انیمیشن ها و نرم افزارهای ایرانی میپردازیم

به نام خدا پویانماییهای ایرانی

در این وبلاگ به انیمیشن ها و نرم افزارهای ایرانی میپردازیم

۱ مطلب با کلمه‌ی کلیدی «تغییر آیکون svg» ثبت شده است

۲۲
آبان

خیلی گشتم تا نتیجه رو از سایتهای زیر پیدا کردم(امر که فیلتر نبودن)

https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element

که میگه:

To change any SVGs color

  1. Add the SVG image using an <img> tag.
<img src="dotted-arrow.svg" class="filter-green"/>
  1. To filter to a specific color, use the following Codepen(Click Here to open codepen) to convert a hex color code to a CSS filter:

For example, output for #00EE00 is

filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
  1. Add the CSS filter into this class.
    .filter-green{
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
    }
 
 
حالا اگر نمیدونید اسم آیکونتون چیه که باید به جای این بذارید:  .filter-green
باید بگم : من گذاشتم:
.elementor-icon-icon-alefsapp
چون:
 
مثلا من وقتی با fontello آیکونم رو ساختم (اول تصویر png بود بعد با inkscape اون رو به Svg تبدیل کردم بعد با سایت fontello به وبفونت تبدیلش کردم. موقعی که میساختم CSS Prefix آیکون رو گذاشتم icon-alef و اسم آیکون رو هم گذاشتم sapp
 
. بعد توی المنتور آپلودش کردم. خودتون هم میتونید بگردید ببینید اسمش چیه.
مهم: توی کد در قسمت اسم آیکونتون حتما باید تمام حروف کوچک باشند.
 
  • صابر سبحانی