0

Как менять цвета для иконки? есть иконка. Можно через фильтры решить ? или инверсию? не совсем понимаю...

или только инлайн?

цвета
#0066CC - дефолтный
#808080 - активный
#363636 - ховер

div {
  background-image: url(https://svgshare.com/i/bNa.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 40px;
  margin-bottom: 25px;
}

div: hover {
  
}

div.active {
  
}
<div>text</div>

<div class="active">text 2</div>

2
  • поскольку вы используете svg, то можно иконку вставить через <svg> в html код и менять fill
    – Alexandr
    22 окт 2021 в 13:25
  • это понятно. Но через фильтр можно как-то? 22 окт 2021 в 13:28

2 ответа 2

2

Либо HTML:

    <i class="fa fa-spinner"></i>

CSS:

    .fa-spinner {
       color: цвет;
    }
1
  • добро пожаловать на stack overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 26 окт 2021 в 10:36
0

ВАРИАНТ1

Пример с filter. Использовал первый попавшийся генератор, так что не факт, что цвета правильные

div {
  background-image: url(https://svgshare.com/i/bNa.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 40px;
  margin-bottom: 25px;
}


div.active {
  filter: invert(55%) sepia(0%) saturate(10%) hue-rotate(254deg) brightness(91%) contrast(86%);
}


div:hover {
  filter: invert(18%) sepia(0%) saturate(1%) hue-rotate(162deg) brightness(100%) contrast(91%);
  
}
<div>text</div>

<div class="active">text 2</div>

ВАРИАНТ 2

Или вставьте svg в html и меняйте fill

div {
  
  padding-left: 40px;
  margin-bottom: 25px;
}


div.active svg{
  fill: #808080;
}

div:hover svg{
  fill: #363636;
}
<div><svg width="24" height="16" viewBox="0 0 24 16" fill="#0066CC" xmlns="http://www.w3.org/2000/svg">
<path d="M24 7.7109C24 7.8669 23.9766 8.0236 23.9297 8.1797C23.8828 8.3358 23.8206 8.4844 23.7422 8.625C23.1174 9.6409 22.3828 10.5623 21.5391 11.3906C20.68 12.2344 19.7425 12.9529 18.7266 13.5469C17.7107 14.1409 16.6326 14.6016 15.4922 14.9297C14.3518 15.2578 13.1873 15.4219 12 15.4219C10.8127 15.4219 9.6482 15.2578 8.5078 14.9297C7.3674 14.6016 6.2893 14.1409 5.2734 13.5469C4.2575 12.9529 3.32 12.2344 2.4609 11.3906C1.6172 10.5623 0.8826 9.6409 0.2578 8.625C0.1794 8.4844 0.1172 8.3357 0.0703 8.1797C0.0234 8.0237 0 7.8669 0 7.7109C0 7.5388 0.0234 7.3747 0.0703 7.2187C0.1172 7.0627 0.1794 6.914 0.2578 6.7734C0.8826 5.7736 1.6172 4.8515 2.4609 4.0078C3.3201 3.1794 4.2576 2.469 5.2734 1.875C6.2892 1.281 7.3674 0.8203 8.5078 0.4922C9.6482 0.1641 10.8127 0 12 0C13.1873 0 14.3518 0.1641 15.4922 0.4922C16.6326 0.8203 17.7107 1.281 18.7266 1.875C19.7425 2.469 20.68 3.1794 21.5391 4.0078C22.3829 4.8516 23.1175 5.7737 23.7422 6.7734C23.8206 6.914 23.8828 7.0627 23.9297 7.2187C23.9766 7.3747 24 7.5388 24 7.7109ZM20.039 5.0039C19.1799 4.1836 18.2263 3.5076 17.1796 2.9766C17.4455 3.43 17.6484 3.9141 17.789 4.4297C17.9297 4.9453 18 5.469 18 6C18 6.8123 17.844 7.5857 17.5312 8.3203C17.2184 9.0549 16.7893 9.6914 16.2421 10.2305C15.6949 10.7696 15.0622 11.1951 14.3437 11.5078C13.6091 11.8359 12.8284 12 12 12C11.1716 12 10.3909 11.8359 9.6562 11.5078C8.9377 11.1951 8.3049 10.7695 7.7578 10.2305C7.2107 9.6915 6.7815 9.0549 6.4688 8.3203C6.1561 7.5857 6 6.8123 6 6C6 5.469 6.0703 4.9453 6.2109 4.4297C6.3515 3.9141 6.5544 3.4299 6.8203 2.9766C5.7737 3.5076 4.8201 4.1836 3.9609 5.0039C3.1017 5.8242 2.3518 6.7266 1.7109 7.7109C2.2888 8.5861 2.945 9.3903 3.6797 10.125C4.4297 10.8596 5.2383 11.4924 6.1055 12.0234C6.9727 12.5544 7.9065 12.969 8.9063 13.2656C9.8907 13.5622 10.9219 13.7109 12.0001 13.7109C13.0783 13.7109 14.1095 13.5622 15.0939 13.2656C16.0937 12.969 17.0275 12.5544 17.8947 12.0234C18.7619 11.4924 19.5705 10.8596 20.3205 10.125C21.0551 9.3904 21.7114 8.5862 22.2892 7.7109C21.6482 6.7266 20.8982 5.8242 20.039 5.0039ZM12.4453 2.1094C12.3201 1.9841 12.1721 1.9219 12 1.9219C10.875 1.9219 9.914 2.3203 9.1172 3.1172C8.3203 3.9141 7.9219 4.875 7.9219 6C7.9219 6.1721 7.9886 6.3201 8.1211 6.4453C8.2536 6.5705 8.406 6.6328 8.5781 6.6328C8.7502 6.6328 8.8982 6.5705 9.0234 6.4453C9.1486 6.3201 9.2109 6.1721 9.2109 6C9.2109 5.2346 9.4841 4.5784 10.0312 4.0312C10.5783 3.484 11.2346 3.2109 12 3.2109C12.1721 3.2109 12.3201 3.1442 12.4453 3.0117C12.5705 2.8792 12.6328 2.7268 12.6328 2.5547C12.6328 2.3826 12.5706 2.2346 12.4453 2.1094Z" />
</svg>text</div>

<div class="active"><svg width="24" height="16" viewBox="0 0 24 16" fill="#0066CC" xmlns="http://www.w3.org/2000/svg">
<path d="M24 7.7109C24 7.8669 23.9766 8.0236 23.9297 8.1797C23.8828 8.3358 23.8206 8.4844 23.7422 8.625C23.1174 9.6409 22.3828 10.5623 21.5391 11.3906C20.68 12.2344 19.7425 12.9529 18.7266 13.5469C17.7107 14.1409 16.6326 14.6016 15.4922 14.9297C14.3518 15.2578 13.1873 15.4219 12 15.4219C10.8127 15.4219 9.6482 15.2578 8.5078 14.9297C7.3674 14.6016 6.2893 14.1409 5.2734 13.5469C4.2575 12.9529 3.32 12.2344 2.4609 11.3906C1.6172 10.5623 0.8826 9.6409 0.2578 8.625C0.1794 8.4844 0.1172 8.3357 0.0703 8.1797C0.0234 8.0237 0 7.8669 0 7.7109C0 7.5388 0.0234 7.3747 0.0703 7.2187C0.1172 7.0627 0.1794 6.914 0.2578 6.7734C0.8826 5.7736 1.6172 4.8515 2.4609 4.0078C3.3201 3.1794 4.2576 2.469 5.2734 1.875C6.2892 1.281 7.3674 0.8203 8.5078 0.4922C9.6482 0.1641 10.8127 0 12 0C13.1873 0 14.3518 0.1641 15.4922 0.4922C16.6326 0.8203 17.7107 1.281 18.7266 1.875C19.7425 2.469 20.68 3.1794 21.5391 4.0078C22.3829 4.8516 23.1175 5.7737 23.7422 6.7734C23.8206 6.914 23.8828 7.0627 23.9297 7.2187C23.9766 7.3747 24 7.5388 24 7.7109ZM20.039 5.0039C19.1799 4.1836 18.2263 3.5076 17.1796 2.9766C17.4455 3.43 17.6484 3.9141 17.789 4.4297C17.9297 4.9453 18 5.469 18 6C18 6.8123 17.844 7.5857 17.5312 8.3203C17.2184 9.0549 16.7893 9.6914 16.2421 10.2305C15.6949 10.7696 15.0622 11.1951 14.3437 11.5078C13.6091 11.8359 12.8284 12 12 12C11.1716 12 10.3909 11.8359 9.6562 11.5078C8.9377 11.1951 8.3049 10.7695 7.7578 10.2305C7.2107 9.6915 6.7815 9.0549 6.4688 8.3203C6.1561 7.5857 6 6.8123 6 6C6 5.469 6.0703 4.9453 6.2109 4.4297C6.3515 3.9141 6.5544 3.4299 6.8203 2.9766C5.7737 3.5076 4.8201 4.1836 3.9609 5.0039C3.1017 5.8242 2.3518 6.7266 1.7109 7.7109C2.2888 8.5861 2.945 9.3903 3.6797 10.125C4.4297 10.8596 5.2383 11.4924 6.1055 12.0234C6.9727 12.5544 7.9065 12.969 8.9063 13.2656C9.8907 13.5622 10.9219 13.7109 12.0001 13.7109C13.0783 13.7109 14.1095 13.5622 15.0939 13.2656C16.0937 12.969 17.0275 12.5544 17.8947 12.0234C18.7619 11.4924 19.5705 10.8596 20.3205 10.125C21.0551 9.3904 21.7114 8.5862 22.2892 7.7109C21.6482 6.7266 20.8982 5.8242 20.039 5.0039ZM12.4453 2.1094C12.3201 1.9841 12.1721 1.9219 12 1.9219C10.875 1.9219 9.914 2.3203 9.1172 3.1172C8.3203 3.9141 7.9219 4.875 7.9219 6C7.9219 6.1721 7.9886 6.3201 8.1211 6.4453C8.2536 6.5705 8.406 6.6328 8.5781 6.6328C8.7502 6.6328 8.8982 6.5705 9.0234 6.4453C9.1486 6.3201 9.2109 6.1721 9.2109 6C9.2109 5.2346 9.4841 4.5784 10.0312 4.0312C10.5783 3.484 11.2346 3.2109 12 3.2109C12.1721 3.2109 12.3201 3.1442 12.4453 3.0117C12.5705 2.8792 12.6328 2.7268 12.6328 2.5547C12.6328 2.3826 12.5706 2.2346 12.4453 2.1094Z" />
</svg>text 2</div>

2
  • спасибо. ховер вроде чуть не такой. Нужно только вручную играться? 22 окт 2021 в 13:44
  • обновил ответ, есть генераторы online, может можно более надежный найти, вот еще например
    – Alexandr
    22 окт 2021 в 13:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.