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 .
html
css
twitter-bootstrap-2
Mike Phils
źródło
źródło
Po prostu zastosuj
text-success
klasę Twitter Bootstrap w Glyphicon:Pełna lista dostępnych kolorów: Bootstrap Dokumentacja: Klasy pomocnicze
(obecny jest również niebieski)
źródło
начал работу
jeststarted 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.text-danger
. Oto pełna lista kolorów.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.
CSS
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
źródło
Ty też możesz to zrobić, mam nadzieję, że to pomaga
źródło
W przypadku bootstrap 3.0 to zadziałało:
źródło
Tak, możesz ustawić ikony na kolor biały. oto jak to zadziałało dla mnie.
Bootstrap <3
HTML
To sprawi, że ikona będzie wyglądać na białą.
źródło
icon-white
Pracował dla mnie z Bootstrap 2. pytanie zadane na niebiesko, ale wiedząc, że to jedna klasa dla bieli wydaje przydać.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.
źródło
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:
źródło
Bootstrap> = v4.0 porzucił obsługę glifów
Ź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-warning
etc.Na przykład, jeśli używasz fontawesome:
źródło
CSS:
HTML
Glify są usuwane w 4.0, polecam Font-awesome 4 lub nowszy :)
źródło
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:
źródło
Kolor nie działa, jeśli używasz obrazu png czcionki bootstrap, tak jak i.
HTML5 używa filtra css do kolorowania obrazu, na przykład
źródło