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

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

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

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

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

يكشنبه, ۲۲ آبان ۱۴۰۱، ۰۳:۵۲ ب.ظ

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

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
 
. بعد توی المنتور آپلودش کردم. خودتون هم میتونید بگردید ببینید اسمش چیه.
مهم: توی کد در قسمت اسم آیکونتون حتما باید تمام حروف کوچک باشند.
 
راستیه قبلش یه کد دیگه دستم رسید که اون فقط پس زمینه یک آیکون مشخص مثل اینستاگرام رو تغییر میداد:

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%);
}

 

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

 
 

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی