تغییر رنگ آیکون در المنتور وردپرس

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

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"/>

2. 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%);

3. 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

 

. بعد توی المنتور آپلودش کردم. خودتون هم میتونید بگردید ببینید اسمش چیه.

مهم: توی کد در قسمت اسم آیکونتون حتما باید تمام حروف کوچک باشند.

 

راستیه قبلش یه کد دیگه دستم رسید که اون فقط پس زمینه یک آیکون مشخص مثل اینستاگرام رو تغییر میداد:

Edit: In the meantime, some custom CSS can solve the issue

div.elementor-social-icons-wrapper a.elementor-icon.elementor-social-icon.elementor-social-icon-instagram {
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}

 

که من گشتم و کد اولی که بهتون گفتم رو پیدا کردم.