Puis-je append de la couleur aux icons de bootstrap uniquement avec CSS?

Le bootstrap de Twitter utilise les icons de Glyphicons . Ils sont ” available in dark gray and white ” par défaut:

Picture-58.png

Est-il possible d’utiliser des trucs CSS pour changer les couleurs des icons? J’espérais un autre shiny css3 qui empêcherait d’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’élément englobant ( ), 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.

Donc, puis-je append de la couleur aux icons de bootstrap uniquement en utilisant CSS?

Oui, si vous utilisez Font Awesome avec Bootstrap! Les icons sont légèrement différentes, mais il y en a plus, elles ont fière allure à toutes les tailles et vous pouvez en changer les couleurs.

Fondamentalement, les icons sont des fonts et vous pouvez en changer la couleur avec la propriété de couleur CSS. Les instructions d’intégration sont au bas de la page dans le lien fourni.


Edit: Les icons Bootstrap 3.0.0 sont maintenant des fonts!

Comme d’autres personnes l’ont également mentionné avec la sortie de Bootstrap 3.0.0, les glyphes d’icône par défaut sont désormais des fonts comme Font Awesome, et la couleur peut être modifiée simplement en modifiant la propriété CSS color . La modification de la taille peut être effectuée via font-size propriété font-size .

Avec la dernière version de Bootstrap RC 3, changer la couleur des icons est aussi simple que d’append une classe avec la couleur souhaitée et de l’append à la plage.

Couleur noire par défaut:

 

Password Changed

deviendrait

 

Password Changed

CSS

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

Bootstrap 3 Liste des glyphicons

Les glyphicons étant désormais des fonts, on peut utiliser les classes contextuelles pour appliquer la couleur appropriée aux icons.

Par exemple: ajout de text-info au css fera de l’icône la couleur bleue de l’info.

Une autre manière possible d’avoir des icons de bootstrap dans une couleur différente est de créer un nouveau fichier .png dans la couleur souhaitée (par exemple, magenta) et de l’enregistrer sous / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png

Dans vos variables.less trouver

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

et append cette ligne

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

Dans vos sprites.less append

 /* 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 l’utiliser comme ça:

  

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

Un travail rapide et salissant autour de moi, sans colorier l’icône, mais avec une étiquette ou un badge de la couleur de votre choix;

   

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

CSS:

  

HTML:

  

Exemple:

 < !doctype html>   Glyphicon Colors        

Regardez le cours Up and Running avec Bootstrap 3 de Jen Kramer, ou regardez la leçon individuelle sur le remplacement des CSS de base par des styles personnalisés .

C’est un peu un rond-point ..

J’ai utilisé les glyphes comme ça

   

et pour affecter la couleur, j’ai inclus un peu de CSS à la tête comme ça

  

Voila, pouces verts et rouges.

Fonctionne également avec la balise de style:

   

entrer la description de l'image ici

C’est vraiment très facile:

il suffit d’utiliser:

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

Par exemple:

 .icon-compass{ color: #C30;} 

C’est tout.

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

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

Fondamentalement, vous créeriez une boîte CSS, avec par exemple une background-image: gradient(foo); puis appliquez-lui un masque d’image basé sur ces images PNG.

Cela vous permettrait d’économiser du temps de développement lors de la création d’images individuelles dans Photoshop, mais je ne pense pas que cela permettrait d’économiser beaucoup de bande passante, sauf si vous affichez les images dans une grande variété de couleurs. Personnellement, je ne l’utiliserais pas car vous devez ajuster votre balisage pour utiliser la technique de manière efficace, mais je suis membre de l’école de pensée “La pureté est impérative”.

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 paquet d’addons, gentiment offert sur ce site .

Juste édité les chemins d’URL dans les fichiers CSS car ils sont absolus (commence par /) et je préfère être relative. 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;} 

Vous pouvez également changer de couleur globalement

c’est à dire

  .glyphicon { color: #008cba; } 

Je pensais que je pourrais append cet extrait à cet ancien post. C’est ce que j’avais fait dans le passé, avant que les icons ne soient des fonts: