Измените цвет глифов на синий в некоторых, но не во всех местах, используя Bootstrap 2

Я использую платформу Bootstrap для моего интерфейса. Я хочу изменить цвет моих глифов на синий, но не везде. В некоторых местах следует использовать цвет по умолчанию.

Я ссылался на эти две ссылки, но я не нахожу ничего полезного.

• Могу ли я добавить цвет к значкам начальной загрузки только с помощью CSS?
• Как я могу изменить глифы в Bootstrap 3 на белый?

Обратите внимание: я использую Bootstrap 2.3.2 .

Значок примет цвет из значения 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класс Twitter Bootstrap к Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

Полный список доступных цветов: Bootstrap Документация: Вспомогательные классы
(присутствует и синий)

Наконец я нашел ответ сам. Чтобы добавить новые иконки в 2.3.2 начальной загрузки, мы должны добавить Font Awsome css в ваш файл. После этого мы можем переопределить стили с помощью css, чтобы изменить цвет и размер.

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

Вы также можете сделать это, надеюсь, это поможет

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Для начальной загрузки 3.0 это работало для меня:

.myclass .glyphicon {color:blue !important;}

Да, вы можете установить значки на белый цвет. Вот как это работает для меня.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

Это сделает ваш значок белым.

Я создал альтернативную библиотеку цветов для начальной загрузки 2.3.2, она доступна и проста в использовании для всех, кто интересуется большим количеством цветов для старой библиотеки глификонов.

Если это только значок начальной загрузки. Обратите внимание, что значки находятся под текстом или, скорее, типографикой. Просто добавьте класс цвета текста следующим образом. Например, 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 исключена поддержка глификонов

Удалил шрифт со значком глифы. Если вам нужны значки, некоторые варианты:

верхняя версия Глификонов

Octicons

Font Awesome

Источник: 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);