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?

css twitter-bootstrap sprite css-sprites 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

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

Odpowiedzi: