Puis-je ajouter de la couleur aux icônes d'amorçage 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 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?

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

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

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.

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.

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>

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 .

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.

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>

C'est en fait très simple:

utilisez simplement:

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

Par exemple:

.icon-compass{
color: #C30;}

C'est tout.

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

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

Vous pouvez également changer de couleur globalement

c'est à dire

 .glyphicon {
       color: #008cba; 
   }

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

#myglyphcustom {
    color:#F00;
}

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.