Изменить цвет технологии glyphicons голубая в некоторых - но не во всех местах с помощью Bootstrap 2

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

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

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

137
css html twitter-bootstrap-2

11 ответов

значок будет принимать цвет от значение 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;
}

эта скрипка есть пример.

256

просто применить Bootstrap 3 text-success класс на значке:

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

enter image description here

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

166

наконец я сам нашел ответ. Чтобы добавить новые значки в 2.3.2 bootstrap, мы должны добавить Шрифт 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>
23

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

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

вы можете сделать это так хорошо, надеюсь она поможет

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

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

Bootstrap <3

HTML-код

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

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

3

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

3

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

загрузки >= В4.0 прекратила поддержку glyphicon

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

восходящая версия технологии glyphicons

Octicons

Шрифт Удивительным

источник:https://v4-alpha.getbootstrap.com/migration/#components

Если вы используете Bootstrap >= v4.0 или новее, вы можете использовать существующие классы стилей bootstrap, такие как text-success,text-warning etc.

например, если вы используете fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>
0

CSS:

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

HTML-код

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

технологии glyphicons удаляются в 4.0, я рекомендую шрифт-удивительный 4 или новее :)

0

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

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

enter image description here

0