Puis-je ajouter de la couleur aux icônes bootstrap uniquement en utilisant CSS?
le bootstrap de Twitter utilise des icônes de Glyphicons . Ils sont " available in dark gray and white " par défaut:
est-il possible d'utiliser une ruse CSS pour changer les couleurs des icônes? J'espérais une autre brillance css3 qui éviterait d'avoir à avoir une image d'icône pour chaque couleur.
je sais que vous pouvez changer la couleur d'arrière-plan de l'affichage ( <i> ) élément, mais je parle de l'icône couleur de premier plan. Je suppose qu'il serait possible d'inverser la transparence sur l'image de l'icône et ensuite de définir la couleur de fond.
donc, Puis-je ajouter de la couleur aux icônes de bootstrap uniquement en utilisant CSS?
14 réponses
Oui, si vous utilisez Font Awesome avec Bootstrap! Les icônes sont légèrement différentes, mais il ya plus d'entre eux, ils regarder grand à n'importe quelle taille, et vous pouvez changer les couleurs d'eux.
fondamentalement, les icônes sont des polices et vous pouvez changer la couleur d'eux juste avec la propriété css color. L'intégration des instructions au bas de la page dans le lien fourni.
modifier: Bootstrap 3.0.0 les icônes sont maintenant des polices!
comme d'autres personnes l'ont également mentionné avec la sortie de Bootstrap 3.0.0, les icon glyphs sont maintenant des polices comme Font Awesome, et la couleur peut être changée simplement en changeant la propriété CSS color . Changer la taille peut être fait via la propriété font-size .
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 que vous voulez et de l'ajouter à la portée.
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;
}
parce que les glyphes sont maintenant des polices de caractères, on peut utiliser les classes contextuelles pour appliquer la couleur appropriée aux icônes.
par exemple:
<span class="glyphicon glyphicon-info-sign text-info"></span>
l'ajout de text-info à la css rendra l'icône de la couleur bleue info.
une autre façon possible d'avoir des icônes bootstrap dans une couleur différente est de créer une nouvelle .png dans la couleur désirée, (par ex. magenta) et l'enregistrer en tant que /chemin-vers-bootstrap css/img/glyphicons-les hobbits- magenta .png
dans vos variables .moins trouver
// 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 vos sprites.moins ajouter
/* 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 ceci:
<i class='icon-chevron-down icon-magenta'></i>
J'espère que ça aidera quelqu'un.
travail rapide et sale autour de qui l'a fait pour moi, pas réellement la coloration de l'icône, mais autour de lui avec une étiquette ou 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>
Le Bootstrap Glyphicons sont des polices. Cela signifie qu'il peut être modifié comme n'importe quel autre texte par 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 Up And Running with Bootstrap 3 de Jen Kramer, ou regardez la leçon individuelle sur Overriding core CSS avec custom styles .
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.
fonctionne aussi avec la balise de style:
<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>
<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>
c'est en fait très facile:
il suffit d'utiliser:
.icon-name{
color: #0C0;}
par exemple:
.icon-compass{
color: #C30;}
C'est ça.
utilise la propriété mask-image , mais c'est un peu un piratage. C'est démontré dans le blog Safari ici .
c'est aussi décrit en profondeur ici .
en gros, vous créez une boîte CSS, avec par exemple un background-image: gradient(foo); , puis vous appliquez un masque d'image basé sur 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 économiserait beaucoup de bande passante à moins que vous n'affichiez les images dans une grande variété de couleurs. Personnellement, je ne l'utiliserais pas parce que vous avez besoin d'ajuster votre marge pour utiliser la technique efficacement, mais je suis un membre de l'école de pensée "la pureté est impérieuse".
la réponse acceptée (en utilisant 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 d'éditer les chemins d'url dans les fichiers css car ils sont absolus (démarrer avec /) et je préfère être relatif. Comme ceci:
.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 changer de couleur aussi bien dans le monde entier
c'est à dire
.glyphicon {
color: #008cba;
}
j'ai pensé que je pourrais ajouter cet extrait à ce vieux post. C'est ce que j'avais fait dans le passé, avant que les icônes ont été 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 d'autre image. Au lieu de cela, cela définit la couleur de fond de l'élément <i> à white et utilise la propriété CSS border-radius pour faire l'ensemble <i> élément "arrondi."Si vous avez remarqué, la valeur du border-radius (7.5 px) est exactement la moitié de celle de la propriété width et height (tous deux 15px, ce qui rend l'icône carrée), ce qui rend l'élément <i> circulaire.
il suffit D'utiliser le GLYPHICONS et vous serez en mesure de changer la couleur tout en réglant le CSS:
#myglyphcustom {
color:#F00;
}