Puis-je ajouter de la couleur aux icônes d'amorçage uniquement en utilisant CSS?


159

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

Image-58.png

Est-il possible d'utiliser une astuce CSS pour changer les couleurs des icônes? J'espérais un autre éclat css3 qui éviterait d'avoir à avoir une image d'icône définie pour chaque couleur.

Je sais que vous pouvez changer la couleur d'arrière-plan de l' <i>élément enclosing ( ), mais je parle de la couleur de premier plan de l'icône. Je suppose 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 de bootstrap uniquement en utilisant CSS?


Je ne pense pas ... Mais vous pourriez probablement le faire avec javascript et un élément canvas.
bfavaretto du

@bfavaretto - pouvez-vous élaborer? voulez-vous dire proposer un code / coordonnées pour dessiner chacune des icônes ou utiliser d'une manière ou d'une autre l'image png existante?
cwd le

1
Désolé, je ne suis pas assez expérimenté avec l'élément canvas pour vous suggérer du code, mais je sais que vous pouvez manipuler les pixels individuellement avec un canvas.
bfavaretto du

Réponses:


189

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 dans toutes les tailles et vous pouvez en changer les couleurs.

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


Edit: les icônes Bootstrap 3.0.0 sont désormais des polices!

Comme d'autres personnes l'ont également mentionné avec la version de Bootstrap 3.0.0, les glyphes d'icônes par défaut sont désormais des polices comme Font Awesome, et la couleur peut être changée simplement en modifiant la colorpropriété CSS. La modification de la taille peut être effectuée via la font-sizepropriété.


9
Ahh, intelligent! N'oubliez pas de définir cursor: default;pour que les utilisateurs ne voient pas l'I-Bar. Découvrez également FF Chartwell, une police vraiment intelligente: tktype.com/chartwell.php
Dai

4
Lorsque vous passez la souris sur du texte (comme dans un traitement de texte), votre curseur ressemble à un caractère majuscule " I" surdimensionné , il est utilisé pour sélectionner du texte. En CSS, il est appelé cursor: text;. Il est également connu sous le nom de "I-beam".
Dai

38

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

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 glyphicons Bootstrap 3


17

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

Par exemple: l' <span class="glyphicon glyphicon-info-sign text-info"></span> ajout text-infoau css fera de l'icône la couleur bleue des informations.


Merci cherchait un moyen d'appliquer les classes contextuelles. N'importe laquelle des classes contextuelles text- * fonctionnera
Dustin Hodges

14

Une autre façon possible d'avoir des icônes d'amorçage dans une couleur différente est de créer un nouveau .png dans la couleur désirée, (par exemple. Magenta) et de l'enregistrer sous / chemin-vers-bootstrap-css / img / glyphicons-halflings- magenta .png

Dans vos variables.less find

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

et ajoutez cette ligne

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

Dans vos 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.


5
je voulais juste réitérerI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color
cwd

Ne peut pas être fait uniquement via CSS qui est également compatible avec tous les navigateurs. Habituellement, les gens ont besoin d'un jeu de couleurs avec des icônes associées - je dirais donc que jusqu'à 5 jeux de couleurs ne sont pas un défi majeur.
foxybagga

@seppludger Comment créer un nouveau sprite halfling de couleur? Avez-vous réussi à faire cela? Je ne peux pas changer les couleurs si je les charge dans un éditeur graphique.
Norman

7

Travail rapide et sale qui l'a fait pour moi, ne pas colorer réellement l'icône, mais l'entourer d'une étiquette ou d'un badge dans la couleur que vous voulez;

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

Votre réponse était utile, +1. Je voulais utiliser l'icône d'édition et je veux mettre une couleur jaune. Pouvez-vous me dire comment faire cela?

Eh bien, vous pouvez simplement changer l'icône-ok en autre chose; par exemple <span class = "label-warning label"> <i class = "icon- <iconname> icon-white"> </i> </span>. Par exemple: <span class = "label-warning label"> <i class = "icon-edit icon-white"> </i> </span>. Il vaut mieux opter pour le nouveau bootstrap imo ..
frbl

6

Les glyphicons Bootstrap sont des polices. Cela signifie qu'il peut être modifié comme n'importe quel autre texte grâce au 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 Up and Running with Bootstrap 3 de Jen Kramer, ou regardez la leçon individuelle sur Remplacer le CSS principal avec des styles personnalisés .


4

Tout cela est un peu détourné.

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 en tête comme ça

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

Voila, pouces verts et rouges.


4

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>

entrez la description de l'image ici


3

C'est en fait très simple:

utilisez simplement:

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

Par exemple:

.icon-compass{
color: #C30;}

C'est tout.


3

Utilisez la mask-imagepropriété, mais c'est un peu un hack. C'est démontré dans le blog Safari ici .

Il est également décrit en détail ici .

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

Cela vous ferait gagner du temps de développement en créant des images individuelles dans Photoshop, mais je ne pense pas que cela économiserait beaucoup de bande passante à moins d'afficher les images dans une grande variété de couleurs. Personnellement, je ne l'utiliserais pas parce que vous avez besoin d'ajuster votre balisage pour utiliser la technique efficacement, mais je suis membre de l'école de pensée «la pureté est impérative».


1
Gardez à l'esprit que le support de la mask-imagepropriété n'est pas terrible .
Scott Bartell

1

La réponse acceptée (en utilisant la police géniale) est la bonne. Mais comme je voulais juste que la variante rouge apparaisse sur les erreurs de validation, j'ai fini par utiliser un package complémentaire, gentiment proposé sur ce site .

Je viens 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;}

Enfin, celui compatible avec les anciennes versions de Bootstrap
Dmitry Ginzburg

1

Vous pouvez également changer de couleur globalement

c'est à dire

 .glyphicon {
       color: #008cba; 
   }

1

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

#myglyphcustom {
    color:#F00;
}

0

J'ai pensé que je pourrais ajouter cet extrait à cet ancien message. 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>

C'est très similaire à la réponse sournoise de @frbl, mais elle n'utilise pas une autre image. Au lieu de cela, cela définit la couleur d'arrière-plan de l' <i>élément sur whiteet utilise la propriété CSS border-radiuspour rendre l' <i>élément entier «arrondi». Si vous l'avez remarqué, la valeur de border-radius(7,5px) est exactement la moitié de celle de la propriété widthand height(les deux 15px, rendant l'icône carrée), ce qui rend l' <i>élément circulaire.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.