Как поменять цвет иконки в css

Как изменить цвет svg иконки в кнопке?

Имеется кнопка, при наведении фон меняется на синий через :hover в css, как сделать чтобы svg иконка меняла цвет на белый?

Вопрос задан более двух лет назад
2480 просмотров

2 комментария

Простой 2 комментария

Как изменить цвет иконки SVG с помощью CSS?

На странице есть иконки в формате SVG . Сами иконки нарисованы в черном цвете.
Как с помощью CSS покрасить их их в красный цвет?

введите сюда описание изображения

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 6 янв 2019 в 7:31
ObehanProger ObehanProger
1,400 2 2 золотых знака 14 14 серебряных знаков 34 34 бронзовых знака
посмотрите тут: css-tricks.com/almanac/properties/f/fill
6 янв 2019 в 7:42

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

В данном контексте, когда svg у вас лежит отдельно в виде файла, через CSS ничего сделать нельзя. Нужно вставить svg в html текстом, тогда появится возможность использовать в css свойство fill к тегу svg и его вложенным тегам.

Отслеживать
ответ дан 6 янв 2019 в 7:49
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак

Если SVG иконка добавлена отдельным файлом с помощью тега , то это тоже самое, как добавить растровое изображение, к которому невозможно применить изменение цвета с помощью CSS правил. Возможно только поменять цвет background .

Но есть способ сделать изменение цвета иконки с помощью фильтров CSS или SVG

Допустим добавлена иконка ключа с помощью :

С помощью различных css фильтров меняем цвет иконок:

.container < display:inline-block; width:25%; height:25%; padding:1.5em; background: rgb(123,215,193); background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%); >.key < height: 3em; width: 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Пример, если svg файл добавлен с помощью background-image:

.key < background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg"); display: inline-block; background-repeat: no-repeat; background-position: center center; height: 3em; width: 3em; margin: 0 0.15em 0 0.3em; vertical-align: -0.3em; background-size: 3em 3em; >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Вариант с изменением цвета при наведении

.container < display: -webkit-flex; display: flex; width:35%; height:35%; >.key < height: 3em; width: 3em; padding: 1em; transition: 0.8s; >:hover.key < height: 4em; width: 4em; -webkit-filter: hue-rotate(320deg); filter: hue-rotate(320deg); >.grey-out < opacity: 0.4; -webkit-filter: grayscale(100%); filter: grayscale(100%); >.hue-rotate < -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); >.invert

Примеры

После того, как вы подключили Font Awesome к своему проекту, иконки можно вызывать с помощью тега . Некоторые примеры были позаимствованы из документации Bootstrap.

The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support. If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Базовые иконки

Пример: Базовые иконки fa-camera-retro

Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строковых элементах (мы любим использовать тег так как он очень короткий, но использование тега будет семантически более правильно).

 class="fa fa-camera-retro"> fa-camera-retro

Пример: Базовые иконки Если вы меняете значение свойства font-size у контейнера иконок, то иконки станут больше. Такое поведение происходит и с цветом, тенью и другими свойствами, которые могут наследоваться.

Увеличенные иконки

Для увеличения размеров иконок в родительском элементе используйте классы fa-lg (увеличение на 33%), fa-2x , fa-3x , fa-4x , или fa-5x .

 class="fa fa-camera-retro fa-lg"> fa-lg  class="fa fa-camera-retro fa-2x"> fa-2x  class="fa fa-camera-retro fa-3x"> fa-3x  class="fa fa-camera-retro fa-4x"> fa-4x  class="fa fa-camera-retro fa-5x"> fa-5x

Если ваши иконки обрезаны сверху и снизу, то удостоверьтесь в правильном значении свойства line-height.

Иконки с фиксированной шириной

Используйте класс fa-fw для того, чтобы задать фиксированную ширину иконкам. Прекрасно подходит для тех случаев, когда различная ширина иконок мешает правильному выравниванию. Особенно полезно при использовании иконок в навигации и списках групп.

 class="list-group">  class="list-group-item" href="#"> class="fa fa-home fa-fw" aria-hidden="true">  Главная  class="list-group-item" href="#"> class="fa fa-book fa-fw" aria-hidden="true">  Библиотека  class="list-group-item" href="#"> class="fa fa-pencil fa-fw" aria-hidden="true">  Приложения  class="list-group-item" href="#"> class="fa fa-cog fa-fw" aria-hidden="true">  Настройки

Иконки списков

Иконки списков
могут быть использованы
как маркеры
в списках

Используйте классы fa-ul и fa-li для быстрого удаления стандартных маркеров в ненумерованных списках.

Обрамленные и вынесенные иконки

…Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца… Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

Используйте классы fa-border и fa-pull-right или fa-pull-left для выделения цитаты или подключения иконки статьи.

 class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"> . Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я.

Анимированные иконки

Пример загрузки (с fa-spinner icon) Пример загрузки (с fa-circle-o-notch icon) Пример загрузки (с fa-refresh icon) Пример загрузки (с fa-cog icon) Пример загрузки (с fa-spinner icon)

Используйте класс fa-spin , чтобы заставить вращаться любую иконку, и используйте класс fa-pulse , чтобы заставить вращаться иконку по 8 шагов. Также работает с классами fa-spinner , fa-refresh , и fa-cog .

 class="fa fa-spinner fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-circle-o-notch fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-refresh fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-cog fa-spin fa-3x fa-fw">  class="sr-only">Загрузка.  class="fa fa-spinner fa-pulse fa-3x fa-fw">  class="sr-only">Загрузка.

На заметку: Некоторые браузера на нескольких платформах имеют проблемы с анимацией иконок, что дает эффект «безудержного веселья» у иконки. Читайте проблему #671 для ознакомления с ней и изучения возможных решений.

На заметку: Анимация CSS3 не поддерживается в IE8 — IE9.

Повернутые и отзеркаленные иконки

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Чтобы произвольно поворачивать и зеркалить иконки, используйте классы fa-rotate-* and fa-flip-* .

 class="fa fa-shield"> normal  class="fa fa-shield fa-rotate-90"> fa-rotate-90  class="fa fa-shield fa-rotate-180"> fa-rotate-180  class="fa fa-shield fa-rotate-270"> fa-rotate-270  class="fa fa-shield fa-flip-horizontal"> fa-flip-horizontal  class="fa fa-shield fa-flip-vertical"> fa-flip-vertical

Групповые иконки

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban на fa-camera

Чтобы сделать группу из иконок, используйте класс fa-stack для родителя, класс fa-stack-1x используйте для задания стандартного размера иконки, а класс fa-stack-2x для увеличенного. Класс fa-inverse может быть использован для присваивания альтернативного цвета иконке. Также вы можете использовать классы увеличения для управления размерами иконок.

 class="fa-stack fa-lg">  class="fa fa-square-o fa-stack-2x">  class="fa fa-twitter fa-stack-1x">  fa-twitter на fa-square-o  class="fa-stack fa-lg">  class="fa fa-circle fa-stack-2x">  class="fa fa-flag fa-stack-1x fa-inverse">  fa-flag на fa-circle  class="fa-stack fa-lg">  class="fa fa-square fa-stack-2x">  class="fa fa-terminal fa-stack-1x fa-inverse">  fa-terminal на fa-square  class="fa-stack fa-lg">  class="fa fa-camera fa-stack-1x">  class="fa fa-ban fa-stack-2x text-danger">  fa-ban на fa-camera

Примеры для Bootstrap 3

Редактировать
Удалить
Забанить
Дать права администратора

Font Awesome прекрасно работает со всеми компонентами Bootstrap.

Пользовательский CSS

Всё, что вы можете сделать со шрифтами с помощью CSS, вы сможете сделать и с Font Awesome.

Пример рейтинга (позаимствовано из CSS Tricks)

Общедоступность

Обновление. Сохранение. Держитесь крепче!

Уровень заряда: 50%

Немного о наших мыслях об общедоступности иконок. Если иконка используется для декорирования или отображения бренда, то они не должны быть объявлены общедоступно, тк они влияют на приложения, читающие сайты в слух. Если иконка передает смысл содержания текста в контексте интерфейса, то убедитесь в том, что этот смысл также передается и вспомогательными технологиями, дополнительным текстом или скрытым блоком.

 class="btn btn-default" href="path/to/settings" aria-label="Настройки">  class="fa fa-cog" aria-hidden="true">   class="btn btn-danger" href="path/to/settings" aria-label="Удалить">  class="fa fa-trash-o" aria-hidden="true">   class="btn btn-primary" href="#navigation-main" aria-label="Перейти к основному меню">  class="fa fa-bars" aria-hidden="true">

 class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Обновление.  class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true">  class="sr-only">Сохранение. Держитесь крепче!

 class="input-group margin-bottom-sm">  class="input-group-addon"> class="fa fa-envelope-o fa-fw" aria-hidden="true">  class="form-control" type="text" placeholder="Ваш email">   class="input-group">  class="input-group-addon"> class="fa fa-key fa-fw" aria-hidden="true">  class="form-control" type="password" placeholder="Пароль">

 href="path/to/shopping/cart" class="btn btn-primary" aria-label="Посмотреть 3 предмета в вашей корзине">  class="fa fa-shopping-cart" aria-hidden="true">

 class="fa fa-battery-half" aria-hidden="true">  class="sr-only">Уровень заряда: 50%

Font Awesome 4.7.0 ·
Создано Дейвом Ганди (Dave Gandy) ·
Перевод на русский язык Дима Калдузов

Font Awesome предоставляется по лицензии SIL OFL 1.1 ·
Разработка предоставляется по лицензии MIT License ·
Документация предоставляется по лицензии CC BY 3.0

Иконки

Material Design стандартизировал более 1100 официальных иконок, каждую в пяти различных «темах» (см. ниже). Для каждой иконки SVG мы экспортируем соответствующий компонент React из пакета @material-ui/icons. Вы можете найти полный список этих иконок здесь.

Инструкция по установке

Установите пакет в каталог проекта командой:

// через npm npm install @material-ui/icons // через yarn yarn add @material-ui/icons

Эти компоненты используют компонент Material-UI SvgIcon для отрисовки пути SVG для каждой иконки, и поэтому у них есть peer-зависимость от следующего выпуска Material-UI.

Если вы еще не используете Material-UI в вашем проекте, вы можете добавить его командой:

// with npm npm install @material-ui/core // with yarn yarn add @material-ui/core

Использование

Импорт иконок с помощью одного из этих двух вариантов:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

import  AccessAlarm, ThreeDRotation > from '@material-ui/icons';

The safest is Option 1 but Option 2 can yield the best developer experience. Make sure you follow the minimizing bundle size guide before using the second approach. The configuration of a Babel plugin is encouraged.

Each icon also has a «theme»: Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme other than default, append the theme name to the icon name. For example @material-ui/icons/Delete icon with:

Filled theme (default) is exported as @material-ui/icons/Delete ,
Outlined theme is exported as @material-ui/icons/DeleteOutlined ,
Rounded theme is exported as @material-ui/icons/DeleteRounded ,
Twotone theme is exported as @material-ui/icons/DeleteTwoTone ,
Sharp theme is exported as @material-ui/icons/DeleteSharp .

Note: The Material Design specification names the icons using «snake_case» naming (for example delete_forever , add_a_photo ), while @material-ui/icons exports the respective icons using «PascalCase» naming (for example DeleteForever , AddAPhoto ). There are three exceptions to this naming rule: 3d_rotation exported as ThreeDRotation , 4k exported as FourK , and 360 exported as ThreeSixty .

Читать:

где разместить подкаст