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

157

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

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

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

html css twitter-bootstrap-2

— Майк Филс
источник

275

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

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

— Викас ходке
источник

6

Спасибо. Я использую Bootstrap /2.3.2/. Он не работает для меня.

— Майк Филс

1

Тем не менее, вы можете использовать его, удалить все правила css для глификона и добавить этот файл css netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… и загрузить шрифты глификона из начальной загрузки 3, это будет работать.

— Викас Годке

3

@VikasGhodke, это все равно потребует перехода всего проекта до версии 3.

— Максим Ви.

194

Просто примените text-successкласс Twitter Bootstrap к Glyphicon:

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

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

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

— itsnikolay
источник

2

зачем смешивать апельсины с яблоками? : \

— USer22999299

7

* начал работуесть started a work. Я написал ответ на лету, и я не думал, что за него проголосуют высоко. Таким образом, скриншот был сделан на русском языке из моего предыдущего приложения, чтобы показать, как выглядит разметка.

— итниколай

3

Я считаю очень уместным, если значок должен отображаться точно, потому что операция была успешной.

— Terix

6

Это лучше, потому что примененный цвет будет соответствовать текущей цветовой схеме темы Bootstrap

— Remus Rusanu

2

@naXa попробуй text-danger. Вот полный список цветов.

— NaXa

24

Наконец я нашел ответ сам. Чтобы добавить новые иконки в 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

Более новые версии (4.0.3 на момент

— написания

7

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

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

— Гувен Сезгин Курт
источник

7

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

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

— Хмур
источник

3

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

Bootstrap <3

HTML

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

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

— AJ
источник

3

У icon-whiteменя получилось с Bootstrap 2. Вопрос, заданный для синего, но знание белого класса для белого кажется удобным.

— smholloway

3

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

— Эрик Улдолл
источник

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>

— White.Raven
источник

2

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>

— Джанер
источник

2

CSS:

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

HTML

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

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

— Майкл Йоргенсен
источник

1

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

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

— grepit
источник

0

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

— Петр Млич
источник