Puis-je ajouter de la couleur à l'amorçage uniquement des icônes à l'aide de CSS?

Question

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

Est-il possible d'utiliser un peu de CSS ruse pour changer les couleurs des icônes? J'espérais que pour certains autres css3 l'éclat qui permettrait d'éviter d'avoir à le faire une image de l'icône de définir 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, à l'inverse de la transparence sur l'icône de l'image et ensuite définir la couleur d'arrière-plan.

Donc, puis-je ajouter de la couleur à l'amorçage uniquement des icônes à l'aide de CSS?

Answer 1

Oui, si vous utilisez des polices génial avec bootstrap! Les icônes sont un peu différentes, mais il y en a plus, ils ont fière allure à n'importe quelle taille, et vous pouvez modifier les couleurs de leur.

http://fortawesome.github.com/Font-Awesome/

Fondamentalement, les icônes sont des polices et vous pouvez changer la couleur de leur juste avec le css de la couleur à la propriété. L'intégration des instructions au bas de la page dans le lien fourni.

---

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

Comme quelques autres personnes ont également mentionné avec la version de bootstrap 3.0.0, l'icône par défaut les glyphes sont maintenant des polices comme la Police de Génial, et la couleur peut être modifiée simplement en changeant l' color d'une propriété css. Modification de la taille peut être effectuée via l' font-size de la propriété.

http://getbootstrap.com/components/#glyphicons

Answer 2

Avec la dernière version de Bootstrap RC 3, en changeant la couleur des icônes est aussi simple que d'ajouter une classe avec la couleur que vous voulez et de l'ajouter à la plage.

Par défaut la couleur noire:

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

allait devenir

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

CSS

.icon-success {
color: #5CB85C;

}

Bootstrap 3 Glyphicons Liste

Answer 3

Parce que les glyphicons sont maintenant polices de caractères, on peut utiliser le contexte des classes pour appliquer la couleur appropriée pour les icônes.

http://getbootstrap.com/css/#helper-classes

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

Answer 4

Une autre façon d'avoir bootstrap icônes dans une couleur différente consiste à créer un nouveau .png dans la couleur désirée, (eg. magenta) et l'enregistrer en tant que /chemin-vers-bootstrap css/img/glyphicons-les hobbits-magenta.png

Dans vos variables.moins de 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 de l'utiliser comme ceci:

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

Espérons que cela aide quelqu'un.

Answer 5

Rapide et sale travail autour de laquelle il a fait pour moi, pas vraiment la coloration de l'icône, mais en les entourant d'une étiquette ou 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>