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

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

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

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

Ответы

Ответ 1

Наконец я нашел ответ. Чтобы добавить новые значки в загрузочный файл 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>

Ответ 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;
}

В этой скрипте есть пример.

Ответ 4

Для bootstrap 3.0 это сработало для меня:

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Bootstrap <3

HTML

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

Это приведет к тому, что ваш значок станет белым.

Ответ 8

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

Ответ 9

Bootstrap> = v4.0 сбросил поддержку глификона

Выбросил шрифт значка Glyphicons. Если вам нужны значки, некоторые параметры:

восходящая версия Glyphicons

Octicons

Шрифт 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>

Ответ 10

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Глификоны удалены в 4.0, я рекомендую Font-awesome 4 или новее :)

Ответ 11

Все предыдущие ответы верны, но вот простой и быстрый способ, если вам нужно только один значок в одном месте, чтобы изменить его цвет:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>

enter image description here

Ответ 12

Цвет не работает, если вы используете для начальной загрузки изображения шрифта 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);