web-dev-qa-db-fra.com

Puis-je ajouter de la couleur aux icônes bootstrap uniquement à l'aide de CSS?

bootstrap de Twitter utilise des icônes par Glyphicons . Ce sont "available in dark gray and white" par défaut:

Picture-58.png

Est-il possible d'utiliser des astuces CSS pour changer les couleurs des icônes? J'espérais une autre brillance css3 qui éviterait de devoir définir une icône pour chaque couleur.

Je sais que vous pouvez modifier la couleur de fond de l'élément (<i>) englobant, mais je parle de la couleur de l'avant-plan de l'icône. J'imagine qu'il serait possible d'inverser la transparence sur l'image de l'icône, puis de définir la couleur d'arrière-plan.

Alors, puis-je ajouter de la couleur aux icônes bootstrap uniquement à l'aide de CSS?

csstwitter-bootstrapspritecss-sprites
158
cwd

Oui, si vous utilisez Font Awesome avec Bootstrap! Les icônes sont légèrement différentes, mais il y en a plus, elles ont fière allure, quelle que soit leur taille, et vous pouvez en changer les couleurs.

En gros, les icônes sont des polices et vous pouvez en changer la couleur avec la propriété de couleur CSS. Les instructions d'intégration se trouvent au bas de la page dans le lien fourni.

Edit: Bootstrap 3.0.0 Les icônes sont maintenant des polices!

Comme d'autres personnes l'ont également mentionné lors de la publication de Bootstrap 3.0.0, les polices par défaut icon glyphs sont désormais des polices telles que Font Awesome. Vous pouvez changer la couleur simplement color Propriété CSS. La modification de la taille peut être effectuée via la propriété font-size.

189
hajpoj

Avec la dernière version de Bootstrap RC 3, changer la couleur des icônes est simple, il suffit d'ajouter une classe avec la couleur souhaitée et de l'ajouter à l'étendue.

Couleur noire par défaut:

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

deviendrait

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

CSS

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

Liste des glyphiques Bootstrap

38
fseminario

Comme les glyphicons sont maintenant des polices, on peut utiliser classes contextuelles pour appliquer la couleur appropriée aux icônes.

Par exemple: <span class="glyphicon glyphicon-info-sign text-info"></span> ajouter text-info au fichier CSS donnera à l'icône la couleur bleue d'information.

17
truncie

Un autre moyen possible d'avoir les icônes bootstrap dans une couleur différente consiste à créer un nouveau fichier .png dans la couleur souhaitée (par exemple, Magenta) et à l'enregistrer sous le nom/path-to-bootstrap-css/img/glyphicons. -halflings -Magenta. png

Dans votre variables.less find

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

et ajouter cette ligne

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

Dans votre sprites.less ajoutez

/* 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}");
}

Et utilisez-le comme ceci:

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

J'espère que ça aide quelqu'un.

14
Sepp Ludger

Travail rapide et délicat pour lequel cela a été fait pour moi, non pas en colorant réellement l’icône, mais en l’entourant d’une étiquette ou d’un badge de la couleur souhaitée;

<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>
7
frbl

Les Bootstrap Glyphicons sont des polices. Cela signifie qu'il peut être modifié comme n'importe quel autre texte via le style CSS.

CSS:

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

HTML:

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

Exemple:

<!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>


Regardez le cours Démarrer avec Bootstrap de Jen Kramer, ou regardez la leçon individuelle sur Remplacement du code CSS principal par des styles personnalisés .

6
Eugene

Fonctionne également avec la balise de style:

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

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

enter image description here

4
joan16v

C'est un peu rond point ..

J'ai utilisé les glyphes comme ça

  </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>

et pour affecter la couleur, j'ai inclus un peu de CSS à la tête comme ceci

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

Voilà, les pouces verts et rouges.

4
Monsters X

Utilisez la propriété mask-image, mais c'est un peu un bidouillage. Cela est démontré dans le blog Safari ici .

Il est également décrit en profondeur ici .

Fondamentalement, vous créez une boîte CSS, avec par exemple une background-image: gradient(foo);, puis appliquez-lui un masque d'image en fonction de ces images PNG.

Cela vous ferait gagner du temps de développement pour créer des images individuelles dans Photoshop, mais je ne pense pas que cela économiserait beaucoup de bande passante à moins que vous affichiez les images dans une grande variété de couleurs. Personnellement, je ne l'utiliserais pas parce que vous devez ajuster votre marge bénéficiaire pour utiliser la technique efficacement, mais je suis membre de l'école de pensée "la pureté est impérative".

3
Dai

C'est en fait très facile:

juste utiliser:

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

Par exemple:

.icon-compass{
color: #C30;}

C'est ça.

3
Aniruddh Dixit

Vous pouvez également changer de couleur globalement

c'est à dire.

 .glyphicon {
       color: #008cba; 
   }
1
Developer

La réponse acceptée (à l'aide de font awesome) est la bonne. Mais comme je voulais juste que la variante rouge apparaisse sur les erreurs de validation, j'ai fini par utiliser un paquet addon, gentiment offert sur ce site .

Vient de modifier les chemins d’URL dans les fichiers CSS car ils sont absolus (commencez par /) et je préfère être relatif. Comme ça:

.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;}
1
mppfiles

Utilisez simplement le GLYPHICONS et vous pourrez changer de couleur en définissant simplement le CSS:

#myglyphcustom {
    color:#F00;
}
0
Valter Lorran

J'ai pensé que je pourrais ajouter cet extrait à cet ancien post. C'est ce que j'avais fait dans le passé, avant que les icônes ne soient des polices:

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

Ceci est très similaire à la réponse sournoise de @frbl, mais il n’utilise pas une autre image. À la place, ceci définit la couleur de fond de l'élément <i> sur white et utilise la propriété CSS border-radius pour que l'élément <i> entier soit "arrondi". Si vous avez remarqué, la valeur de border-radius (7.5px) est exactement la moitié de celle de la propriété width et height (les deux 15px, ce qui rend l’icône carré), ce qui rend le <i> élément circulaire.

0
WebWanderer