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

157

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.

Uwaga: używam Bootstrap 2.3.2 .

Mike Phils
źródło

Odpowiedzi:

275

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.

Vikas Ghodke
źródło
6
Dzięki. Używam Bootstrap /2.3.2/, nie działa dla mnie.
Mike Phils
1
Nadal możesz go użyć, usuń wszystkie reguły css dla glificonu i dodaj ten plik css netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/ ... i pobierz czcionki glificonów z bootstrap 3, to będzie ćwiczenie.
Vikas Ghodke,
3
@VikasGhodke, co nadal wymagałoby migracji całego projektu do wersji 3.
Maksim Vi.
194

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

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

wprowadź opis obrazu tutaj

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

itsnikolay
źródło
2
po co mieszać pomarańcze z jabłkami? : \
USer22999299
7
* начал работуjest started a work. Napisałem odpowiedź w locie i nie sądziłem, że zostanie ona wysoko oceniona. Dlatego zrzut ekranu został wykonany w języku rosyjskim z mojej poprzedniej aplikacji, aby pokazać, jak wyglądały znaczniki.
itsnikolay
3
Uważam za bardzo odpowiednie, jeśli ikona musi być pokazana dokładnie, ponieważ operacja zakończyła się sukcesem.
Terix,
6
To jest lepsze, ponieważ zastosowany kolor będzie zgodny z obecnym schematem kolorów motywu Bootstrap
Remus Rusanu
2
@naXa spróbuj text-danger. Oto pełna lista kolorów.
naXa
24

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>
Mike Phils
źródło
2
Nowsze wersje (4.0.3 w czasie
pisania
7

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

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
Guven Sezgin Kurt
źródło
7

W przypadku bootstrap 3.0 to zadziałało:

.myclass .glyphicon {color:blue !important;}
puddleglum
źródło
3

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łą.

AJ
źródło
3
icon-whitePracował dla mnie z Bootstrap 2. pytanie zadane na niebiesko, ale wiedząc, że to jedna klasa dla bieli wydaje przydać.
smholloway
2

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>
Biały Kruk
źródło
2

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>
Caner
źródło
2

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

Michael Jørgensen
źródło
1

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>  

wprowadź opis obrazu tutaj

grepit
źródło
0

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);
Peter Mlich
źródło