Zmień kolor glifów na niebieski w niektórych, ale nie we wszystkich miejscach, używając Bootstrap 2

Używam struktury Bootstrap dla mojego interfejsu użytkownika. Chcę zmienić kolor moich glifów na niebieski, ale nie we wszystkich miejscach. W niektórych miejscach powinien używać domyślnego koloru.

Odniosłem się do tych dwóch linków, ale nie znajduję nic pomocnego.

• Czy mogę dodać kolor do ikon bootstrap tylko za pomocą CSS?
• Jak zmienić glify Bootstrap 3 na białe?

Uwaga: używam Bootstrap 2.3.2 .

Ikona przyjmie kolor z wartości colorwłaściwości css jej rodzica.

Możesz dodać to bezpośrednio do stylu:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

Lub możesz dodać go jako klasę do swojej ikony, a następnie ustawić kolor czcionki w 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;
}

To skrzypce ma przykład.

Po prostu zastosuj text-successklasę Twitter Bootstrap w Glyphicon:

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

Pełna lista dostępnych kolorów: Bootstrap Dokumentacja: Klasy pomocnicze
(obecny jest również niebieski)

W końcu sam znalazłem odpowiedź. Aby dodać nowe ikony w bootstrapie 2.3.2, musimy dodać do pliku Font Awsome css. Po wykonaniu tej czynności możemy nadpisać style za pomocą css, aby zmienić kolor i rozmiar.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

Jeśli chcemy zmienić kolor ikony, po prostu dodaj brązową klasę, a ikona zmieni kolor na brązowy. Zapewnia również ikonę o różnej wielkości.

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>

Ty też możesz to zrobić, mam nadzieję, że to pomaga

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

W przypadku bootstrap 3.0 to zadziałało:

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

Tak, możesz ustawić ikony na kolor biały. oto jak to zadziałało dla mnie.

Bootstrap <3

HTML

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

To sprawi, że ikona będzie wyglądać na białą.

Stworzyłem alternatywną bibliotekę kolorów dla bootstrap 2.3.2, która jest dostępna i prosta w użyciu dla każdego, kto interesuje się większą liczbą kolorów ze starej biblioteki glifikonów.

Jeśli jest to tylko ikona ładowania początkowego. Zwróć uwagę, że ikony są pod tekstem, a raczej typografią. Po prostu dodaj klasę koloru tekstu w ten sposób. Np. Tekst-podstawowy, tekst-info i tak dalej, i tak dalej, do klasy icon:

<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 porzucił obsługę glifów

Usunięto czcionkę ikony Glyphicons. Jeśli potrzebujesz ikon, niektóre opcje to:

zewnętrzna wersja Glyphicons

Octicons

Font Awesome

Źródło: https://v4-alpha.getbootstrap.com/migration/#components

Jeśli używasz Bootstrap> = v4.0 lub nowszy, można użyć istniejących klas styl bootstrap takie jak text-success, text-warningetc.

Na przykład, jeśli używasz 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>

Glify są usuwane w 4.0, polecam Font-awesome 4 lub nowszy :)

Wszystkie poprzednie odpowiedzi są poprawne, ale tutaj jest prosty i szybki sposób, jeśli potrzebujesz tylko jednej ikony w jednym miejscu, aby zmienić jej kolor:

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

Kolor nie działa, jeśli używasz obrazu png czcionki bootstrap, tak jak i.

[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 używa filtra css do kolorowania obrazu, na przykład

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);