Puis-je ajouter de la couleur à l'amorçage uniquement des icônes à l'aide de CSS?
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.
Oui, puis-je ajouter de la couleur à l'amorçage uniquement des icônes à l'aide de CSS?
- Je ne le pense pas... Mais vous pouvez probablement le faire avec du javascript et un élément canvas.
- pouvez-vous développer? entendez-vous venir avec code / coordonnées dessiner chacun des icônes ou à l'aide de l'existant image png en quelque sorte?
- Désolé, je ne suis pas assez expérimenté avec l'élément canvas à vous suggérons de code, mais je sais que vous pouvez manipuler les pixels individuellement avec une toile.
Vous devez vous connecter pour publier un commentaire.
Oui, si vous utilisez Police Impressionnant 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.
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 polices!
Que quelques autres personnes ont également mentionné avec la version de Bootstrap 3.0.0, la valeur par défaut icône de glyphes sont maintenant des polices comme la Police de Génial, et la couleur peut être modifiée en changeant simplement le
color
propriété CSS. Modification de la taille peut être fait viafont-size
propriété.cursor: default;
de sorte que les utilisateurs ne voient pas le je-Bar. Aussi, découvrez FF Chartwell, un très ingénieuse de la police: tktype.com/chartwell.phpI
" le caractère, il est utilisé pour la sélection de texte. En CSS, il est appelécursor: text;
. Il est également connu comme "I-beam".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 durée.
Par défaut de la couleur noire:
deviendrait
CSS
Bootstrap 3 Glyphicons Liste
Parce que les glyphicons sont maintenant polices de caractères, on peut utiliser la contextuel classes pour appliquer la couleur appropriée pour les icônes.
Par exemple:
<span class="glyphicon glyphicon-info-sign text-info"></span>
l'ajout de
text-info
pour le css fera l'icône de l'info de couleur bleu.Un autre moyen possible 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 votre variables.moins trouver
et ajoutez cette ligne
Dans votre sprites.moins ajouter
Et de l'utiliser comme ceci:
Espère que cela aide quelqu'un.
I was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color
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;
Le Bootstrap Glyphicons sont des polices. Cela signifie qu'il peut être changé comme tout autre texte à travers le style CSS.
CSS:
HTML:
Exemple:
Suivez le cours Et en cours d'Exécution avec Bootstrap 3 par Jen Kramer, ou de regarder la leçon individuelle sur Primordial de base de CSS avec des styles personnalisés.
Tout cela est un peu rond-point..
J'ai utilisé les glyphes comme ce
et à affecter la couleur, j'ai inclus un peu de css à la tête comme ça
Voila, le vert et le rouge, les pouces.
Travaille aussi avec le style de la balise:
Il est effectivement très facile:
suffit d'utiliser:
Par exemple:
Que c'est.
Utiliser le
mask-image
bien, mais c'est un peu un hack. Il est démontré dans le Safari blog ici.Il est également décrit en détail ici.
Fondamentalement, vous devez créer une boîte CSS, avec dire un
background-image: gradient(foo);
et ensuite appliquer un masque d'image sur ces images PNG.Il serait vous faire économiser le temps de développement individuel des images dans Photoshop, mais je ne pense pas que cela permettrait d'économiser beaucoup de bande passante, à moins que vous serez d'afficher des images dans une grande variété de couleurs. Personnellement, je ne voudrais pas l'utiliser parce que vous avez besoin d'ajuster votre balise à utiliser la technique de manière efficace, mais je suis un membre de la "pureté" est imperitive" école de pensée.
css trickery
mask-image
propriété n'est-ce pas grand.La accepté de répondre (à l'aide de la police génial) est la bonne. Mais depuis que j'ai juste voulu le rouge variante de montrer sur des erreurs de validation, j'ai fini à l'aide d'un addon paquet, aimablement offert sur ce site.
Venez de modifier les chemins d'url dans les fichiers css depuis qu'ils sont absolus (commencer par"/") et je préfère être que relative. Comme ceci:
Vous pouvez changer de couleur à l'échelle mondiale ainsi
c'est à dire
J'ai pensé que je pourrais ajouter cet extrait de cet ancien relais de poste.
C'est ce que j'avais fait dans le passé, avant que les icônes ont été polices:
Ceci est très similaire à @frbl 's sournois réponse, mais il ne prend pas en utiliser une autre image. Au lieu de cela, il définit la couleur d'arrière-plan de la
<i>
élément dewhite
et utilise la propriété CSSborder-radius
pour faire la totalité de<i>
élément "arrondis." Si vous avez remarqué, la valeur de laborder-radius
(7.5 px) est exactement la moitié de celle de lawidth
etheight
bien (15px, faisant de l'icône carré), faisant de la<i>
élément circulaire.Suffit d'utiliser la GLYPHICONS et vous serez en mesure de modifier la couleur réglage de la CSS: