Змініть колір гліфіконів на синій у деяких, але зовсім не за допомогою Bootstrap 2

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

Я посилався на ці два посилання, але не знаходжу нічого корисного.

• Чи можу я додати колір до піктограм завантажувача лише за допомогою CSS?
• Як змінити гліфікони Bootstrap 3 на білі?

Зверніть увагу: я використовую Bootstrap 2.3.2 .

Піктограма буде приймати колір зі значення властивості colorcss свого батьківського.

Ви можете або додати це безпосередньо до стилю:

<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 на Glyphicon:

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

Повний список доступних кольорів: Документація на завантаження: Класи помічників
(синій також присутній)

Нарешті я знайшов собі відповідь. Щоб додати нові піктограми в завантажувальну версію 2.3.2, ми повинні додати у свій файл CSS шрифту Awsome . Після цього ми можемо замінити стилі 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, вона доступна і проста у використанні для всіх, хто цікавиться більшою кількістю кольорів для старої бібліотеки глікоконів.

Якщо це лише значок завантажувача. Зауважте, що піктограми знаходяться під текстом, а точніше типографією. Просто додайте клас кольорів тексту так. Наприклад, основний текст, текстова інформація та інше тощо до класу значків:

<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. Якщо вам потрібні піктограми, деякі варіанти:

версія за течією гліфіконів

Октикони

Шрифт Awesome

Джерело: https://v4-alpha.getbootstrap.com/migration/#components

Якщо ви використовуєте Bootstrap> = v4.0 або новішої версії, ви можете використовувати існуючі класи стилів завантажувальної програми, такі як text-successі text-warningт.д.

Наприклад, якщо ви використовуєте приємне:

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