Glyphicons bootstrap

Utilisez ce CSS sprite generator , en téléchargeant le fichier zip. Il va créer les classes CSS pertinentes pour vous (les noms sont tirés des images elles-mêmes), en fusionnant toutes les images en une seule (transparente) PNG.

Vous pouvez également utiliser la solutionFont Awesome .

Les graphiques vectoriels évolutifs signifient que les icônes sont géniales à n'importe quelle taille.

Conçu à partir de zéro pour être entièrement rétrocompatible avec Twitter Bootstrap 2.0.

J'en ai également créé un sur Github. Je n'ai pas vu le message de Marco avant.

Https://github.com/ekryski/bootstrap-template

D'après ce que je me souviens, Glyphicons ne fournit pas leurs icônes comme une version de sprite (beaucoup d'icônes comme une image), au lieu de cela, vous obtenez chaque icône séparément. Si vous prévoyez seulement d'utiliser quelques-unes de leurs icônes, cela devrait être ok.

La meilleure façon serait de créer un fichier CSS séparé et de continuer avec leur".icône - " convention de nommage.

.icon-whatever {
   background:url('..img/someicon.png') 0 0; 
}

La position d'arrière-plan par défaut est 14px 14px vous devez donc la Réinitialiser à 0 0 comme je l'ai fait ci-dessus.

J'ai créé un sprite et CSS drop - in pour Bootstrap pour fournir cette fonctionnalité. Le repo et les instructions sont sur Github . Toutes les icônes n'ont pas encore de couverture, et certaines sont encore légèrement décentrées. Pour utiliser les icônes plus grandes, ajoutez simplement la classe CSS icon-large:

<i class="icon-large icon-search"></i>

Il y a un excellent article sur les icônes Bootstrap ici: http://www.themplio.com/twitter-bootstrap-icons

Pas besoin de l'incorporer. Vous pouvez simplement ajouter les glyphicons et l'utiliser à côté de la halflings bootstrap est livré avec.

Ajouter les glyphicons (Ensemble régulier) comme suit:

/css/glyphicons.css 
/fonts/glyphicons-regular.eot 
/fonts/glyphicons-regular.svg 
/fonts/glyphicons-regular.ttf 
/fonts/glyphicons-regular.woff 
/fonts/glyphicons-regular.woff2

Vous devriez probablement donner à la base-CSS-class: .glyphicons le même style que bootstraps .glyphicon

.glyphicons {
    position:relative;
    top:2px; 
    display:inline-block;
    font-family:'Glyphicons Regular';
    font-style:normal;
    font-weight:normal;
    line-height:1;
    vertical-align:top;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

Ensuite, ajoutez la référence aux glyphicons dans votre page comme suit:

<link href="/css/glyphicons.css" rel="stylesheet" />

Maintenant, utilisez les glyphicons 'réguliers' complets avec les halflings:

<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>

<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>

L'autre les réponses sont bonnes mais gardez à l'esprit la différence entre les icônes avec la technique de police et l'ancienne technique lors de l'utilisation de sprite-png. Png ne sont pas toujours évolutifs et sont donc livrés avec plusieurs tailles. Aussi, la couleur peut ne pas être défini. Pour contraster avec l'arrière-plan, la classe .white peut être utilisée sur les png pour passer du noir au blanc. En utilisant les polices, stylisez les icônes comme vous le feriez pour une police:

.iconstyle {  color: blue;  font-size: 26px;  etc.. }

Vous pourriez utiliser mon soluce. Mettez cette ligne après bootstrap link url css sur votre en-tête.

<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">

Puis appeler le code html en ligne

<i class="icon-close icon-red"></i>&nbsp;Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i>&nbsp;Someting <!-- 32x32pix size color red -->

Vous pouvez télécharger ici les ressources (images-icônes png et CSS en zip):

Http://www.photonautes-associes.fr/utils/assets.zip profitez :)

Téléchargez les polices de la page bootstrap officielle, puis collez ce code tel quel dans votre fichier CSS

Essayez ce code

@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}

Je pensais ajouter mon expérience à la liste ici.

Il y avait plusieurs obstacles pour moi en essayant d'ajouter des Glyphicons tous à ma base de code labyrinthique et criblée de Bootstrap existante. (Parmi eux, Glyphicons tous utilise la construction ".glyphicons .glyphicons-[nom]" et Bootstrap utilise la construction ".glyphicon .glyphicon-[nom]").

J'ai finalement décidé d'utiliser les deux en parallèle. À l'avenir, je trouve que j'utilise les Glyphicons de plus en plus de construction, mais la construction Bootstrap fonctionne toujours pour tout mon code existant.

Oui, y compris les deux "polices" ajoute au poids global de la page, mais pas de manière désastreuse.

Ce que j'ai fait était assez simple et a parfaitement fonctionné. NOTE: c'est si vous voulez que ces beaux glyphicons fonctionnent comme des polices, comme le fait la version bootstrap que j'utilise.

1. Dans le zip glyphicons, copiez toutes les polices de / glyphicons / web / bootstrap_example/fonts à l'endroit où vos polices bootstrap sont actuellement dans votre projet

2. Dans le zip glyphicons, regardez /web / bootstrap_example / CSS / glyphicons.css, copiez et collez dans votre propre moins/css fichier.

3. Cette étape peut être inutile tant que votre propre fichier css/less les écrase correctement: dans le bootstrap de votre projet.fichier css, supprimer des trucs @ font-face,.styles glyphicon, et toutes les balises de contenu individuelles glyphicon (c.-à-d.,.glyphicon-xxxx: avant { contenu:... }).

4. Dans votre fichier less/css avec toutes les nouvelles balises, effectuez une recherche et un remplacement ".glyphicons-" remplacer par ".glyphicon-"

Ça devrait être ça, à moins que j'oublie quelque chose simple. Fonctionne très bien pour moi.

Utiliser glyphicons classess, exemple:

`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`

Mes polices d'icônes préférées sont Fontello , vous pouvez télécharger les icônes dont vous avez besoin au lieu du paquet entier.