Czy mogę dodać kolor do ikon bootstrap tylko za pomocą CSS?

159

Bootstrap Twittera wykorzystuje Icons by Glyphicons . available in dark gray and whiteDomyślnie są to „ ”:

Czy można użyć sztuczki CSS, aby zmienić kolory ikon? Liczyłem na inną błyskotliwość css3, która zapobiegnie konieczności ustawiania obrazu ikony dla każdego koloru.

Wiem, że możesz zmienić kolor tła załączającego ( ), ale mówię o kolorze pierwszego planu ikony. Wydaje mi się, że można by odwrócić przezroczystość obrazu ikony, a następnie ustawić kolor tła.

Czy mogę więc dodawać kolory do ikon bootstrap tylko przy użyciu CSS?

— cwd
źródło

Nie sądzę ... Ale prawdopodobnie mógłbyś to zrobić za pomocą javascript i elementu canvas.

— bfavaretto

@bfavaretto - czy możesz to rozwinąć? czy masz na myśli wymyślenie kodu / współrzędnych, aby narysować każdą z ikon, czy jakoś wykorzystać istniejący obraz png?

— cwd

1

Przepraszam, nie mam wystarczającego doświadczenia z elementem canvas, aby zasugerować kod, ale wiem, że możesz manipulować pikselami indywidualnie za pomocą płótna.

— bfavaretto

189

Tak, jeśli używasz Font Awesome z Bootstrap! Ikony są nieco inne, ale jest ich więcej, świetnie wyglądają w każdym rozmiarze i można je zmieniać kolorystykę.

Zasadniczo ikony są czcionkami i możesz zmienić ich kolor tylko za pomocą właściwości koloru CSS. Instrukcje integracji znajdują się na dole strony w podanym linku.

Edycja: ikony Bootstrap 3.0.0 są teraz czcionkami!

Jak wspominali inni ludzie przy wydaniu Bootstrap 3.0.0, domyślne glify ikon są teraz czcionkami takimi jak Font Awesome, a kolor można zmienić po prostu zmieniając colorwłaściwość CSS. Zmiana rozmiaru może być dokonana poprzez font-sizewłaściwość.

— hajpoj
źródło

9

Ach, sprytny! Nie zapomnij ustawić cursor: default;tak, aby użytkownicy nie widzieli paska I-Bar. Sprawdź też FF Chartwell, naprawdę sprytną czcionkę: tktype.com/chartwell.php

— Dai,

4

Kiedy najeżdżasz kursorem na tekst (jak w edytorze tekstu), kursor wygląda jak wielka Ilitera „ ” i służy do zaznaczania tekstu. W CSS nazywa się to cursor: text;. Jest również znany jako „dwuteownik”.

— Dai

38

W najnowszym wydaniu Bootstrap RC 3 zmiana koloru ikon jest tak prosta, jak dodanie klasy o wybranym kolorze i dodanie jej do zakresu.

Domyślny kolor czarny:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

stanie się

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Lista glifów Bootstrap 3

— fseminario
źródło

17

Ponieważ glify są teraz czcionkami, można używać klas kontekstowych aby zastosować odpowiedni kolor do ikon.

Na przykład:  dodanie text-infodo css spowoduje, że ikona zmieni kolor na niebieski.

— truncie
źródło

Dzięki szukałem sposobu na zastosowanie klas kontekstowych. Dowolne z zajęć kontekstualnych tekst * będzie działać

— Dustin Hodges

14

Innym sposobem na umieszczenie ikon bootstrap w innym kolorze jest utworzenie nowego pliku .png w żądanym kolorze (np. Magenta) i zapisanie go jako / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

W twoich zmiennych. Bez znajdź

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

i dodaj tę linię

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

W twoich duszkach. Bez dodawania

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

I użyj tego w ten sposób:

<i class='icon-chevron-down icon-magenta'></i>

Mam nadzieję, że to komuś pomoże.

— Sepp Ludger
źródło

5

chciałem tylko powtórzyćI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

Nie można tego zrobić wyłącznie za pomocą CSS, który jest również kompatybilny z różnymi przeglądarkami. Zwykle ludzie potrzebują schematu kolorów z powiązanymi ikonami - więc powiedziałbym, że do 5 zestawów kolorów nie jest wielkim wyzwaniem.

— foxybagga

@seppludger Jak stworzyć nowego duszka kolorowego halflinga? Czy udało ci się to zrobić? Nie mogę zmienić kolorów, jeśli załaduję je w jakimkolwiek edytorze graficznym.

— Norman

7

Szybka i brudna robota, która zrobiła to za mnie, a nie kolorowanie ikony, ale otaczanie jej etykietą lub plakietką w wybranym kolorze;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

— frbl
źródło

Twoja odpowiedź była przydatna, +1. Chciałem użyć ikony edycji i chcę dodać żółty kolor. Czy możesz mi powiedzieć, jak to zrobić?

Cóż, możesz po prostu zmienić ikonę-ok na coś innego; np. icon-white"> . Na przykład: . Lepiej jest wybrać nowy bootstrap imo ..

— frbl

6

Glify Bootstrap to czcionki. Oznacza to, że można go zmienić jak każdy inny tekst za pomocą stylów CSS.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Przykład:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

Obejrzyj kurs „Bieganie i bieganie z Bootstrap 3” autorstwa Jen Kramer lub indywidualną lekcję na temat zastępowania podstawowego kodu CSS niestandardowymi stylami .

— Eugene
źródło

4

To wszystko jest trochę okrężne.

Użyłem takich glifów

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

aby wpłynąć na kolor, dodałem trochę CSS na czele w ten sposób

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, zielone i czerwone kciuki.

— Potwory X
źródło

4

Działa również z tagiem style:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

wprowadź opis obrazu tutaj

— joan16v
źródło

3

W rzeczywistości jest to bardzo proste:

po prostu użyj:

.icon-name{
color: #0C0;}

Na przykład:

.icon-compass{
color: #C30;}

Otóż to.

— Aniruddh Dixit
źródło

3

Skorzystaj z tej mask-imagewłasności, ale to trochę hack. Jest to pokazane na blogu Safari tutaj .

Jest to również szczegółowo opisane tutaj .

Zasadniczo utworzyłbyś pole CSS, powiedzmy a, background-image: gradient(foo);a następnie zastosowałbyś do niego maskę obrazu na podstawie tych obrazów PNG.

Zaoszczędziłoby to czas potrzebny na tworzenie pojedynczych obrazów w Photoshopie, ale nie sądzę, aby zaoszczędziłoby to dużo przepustowości, chyba że będziesz wyświetlać obrazy w szerokiej gamie kolorów. Osobiście nie użyłbym tego, ponieważ musisz dostosować swoje znaczniki, aby skutecznie używać tej techniki, ale jestem członkiem szkoły myślenia „czystość jest imperatywna”.

— Dai
źródło

1

Pamiętaj, że obsługa mask-imagenieruchomości nie jest tak dobra .

— Scott Bartell,

1

Zaakceptowana odpowiedź (używając niesamowitej czcionki) jest właściwa. Ale ponieważ chciałem tylko, aby czerwony wariant wyświetlał się przy błędach walidacji, zakończyłem używanie pakietu dodatków, uprzejmie oferowanego na tej stronie .

Właśnie wyedytowałem ścieżki URL w plikach css, ponieważ są one bezwzględne (zaczynają się od /) i wolę być względne. Lubię to:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}

— mppfiles
źródło

Wreszcie ten kompatybilny ze starymi wersjami Bootstrap

— Dmitry Ginzburg

1

Możesz także zmienić kolor globalnie

to znaczy

 .glyphicon {
       color: #008cba; 
   }

— Deweloper
źródło

1

Po prostu użyj GLIFIKONÓW, a będziesz mógł zmienić kolor po prostu ustawiając CSS:

#myglyphcustom {
    color:#F00;
}

— Valter Lorran
źródło

0

Pomyślałem, że mógłbym dodać ten fragment do tego starego postu. Oto, co robiłem w przeszłości, zanim ikony były czcionkami:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

Jest to bardzo podobne do podstępnej odpowiedzi @frbl, ale nie używa innego obrazu. Zamiast tego ustawia kolor tła elementu na whitei używa właściwości CSS, border-radiusaby uczynić cały element „zaokrąglonym”. Jeśli zauważyłeś, wartość border-radius(7,5 piks.) Jest dokładnie o połowę niższa od właściwości widthand height(obie 15 pikseli, co powoduje, że ikona jest kwadratowa), co powoduje, że element jest okrągły.

— WebWanderer
źródło