Я использую структуру Bootstrap для своего пользовательского интерфейса. Я хочу изменить цвет моих глификонов на синий, но не во всех местах. В некоторых местах он должен использовать цвет по умолчанию.
Я упомянул эти две ссылки, но я не нахожу ничего полезного.
Обратите внимание: я использую Bootstrap 2.3.2.
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
CSS
.brown{color:#9b846b}
Если мы хотим изменить цвет значка, просто добавьте коричневый класс, и значок станет коричневым. Он также обеспечивает значок различного размера.
HTML
<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Значок примет цвет от значения свойства color css этого родителя.
Вы можете добавить это непосредственно к стилю:
<span class="glyphicon glyphicon-user" style="color:blue"></span>
Или вы можете добавить его как класс в свой значок, а затем установить цвет шрифта в CSS
HTML
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>
CSS
.blue {
color: blue;
}
Просто примените text-success класс text-success Bootstrap к Glyphicon:
<span class="glyphicon glyphicon-play text-success">начал работу</span>
Полный список доступных цветов: Bootstrap Документация: Вспомогательные классы
(Синий также присутствует)
Для bootstrap 3.0 это сработало для меня:
.myclass .glyphicon {color:blue !important;}
Вы также можете сделать это, надеюсь, поможет
<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
Я создал альтернативную цветовую библиотеку для bootstrap 2.3.2, она доступна и проста в использовании для всех, кто интересуется большим количеством цветов для старых глификонов библиотека.
Да, вы можете установить значки на белый цвет. вот как это сработало для меня.
Bootstrap <3
<i class="icon-ok icon-white"></i>
Это приведет к тому, что ваш значок станет белым.
Если это только значок начальной загрузки. Обратите внимание, что значки находятся под текстом или, скорее, типографикой. Просто добавьте класс цвета текста, как это. Например, text-primary, text-info и т.д. И т.д. В класс значков:
<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>
Bootstrap> = v4.0 сбросил поддержку глификона
Выбросил шрифт значка Glyphicons. Если вам нужны значки, некоторые параметры:
восходящая версия Glyphicons
Источник: https://v4-alpha.getbootstrap.com/migration/#components
Если вы используете Bootstrap> = v4.0 или новее, вы можете использовать существующие классы стиля бутстрапа, такие как text-success, text-warning и т.д.
Например, если вы используете fontawesome:
<i class="fa fa-tag text-danger" aria-hidden="true"></i>
CSS:
.blue-icon{
color:blue !important;
}
HTML
<i class="fa fa-wrench blue-icon"></i>
Глификоны удалены в 4.0, я рекомендую Font-awesome 4 или новее :)
Все предыдущие ответы верны, но вот простой и быстрый способ, если вам нужно только один значок в одном месте, чтобы изменить его цвет:
<p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>
Цвет не работает, если вы используете для начальной загрузки изображения шрифта PNG, как я.
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
HTML5 использует CSS-фильтр для раскрашивания изображения, пример
filter: invert(100%) contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);