Comment utiliser les glyphicons dans bootstrap 3.0

Question

J'ai déjà utilisé des glyphicons dans bootstrap 2.3 mais j'ai maintenant mis à jour vers bootstrap 3.0. Maintenant, je suis incapable d'utiliser la propriété de l'icône.

Dans bootstrap 2.3, la balise ci-dessous fonctionne.

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

Dans bootstrap 3.0, ça ne fonctionne pas.

Answer 1

Les icônes (glyphicons) sont désormais contenues dans un fichier fichier css séparé.. .

Le balisage a changé pour :

<i class="glyphicon glyphicon-search"></i>

ou

<span class="glyphicon glyphicon-search"></span>

Voici une liste utile de changements pour Bootstrap 3 : http://bootply.com/bootstrap-3-migration-guide

Answer 2

Et voilà :

<i class="glyphicon glyphicon-search"></i>

Plus d'informations :

http://glyphicons.getbootstrap.com/

En fait, vous pouvez utiliser ceci outil de conversion cela mettra également à jour le code des icônes :

Answer 3

Si vous téléchargez une distro bootstrap 3 personnalisée, vous devez le faire :

1. Téléchargez la version complète de la distribution à partir de https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Décompressez et téléchargez le dossier entier appelé fonts dans votre répertoire bootstrap. Mettez-le avec les autres dossiers "css, js".

Exemple avant :

\css
\js
index.html

Exemple après le téléchargement :

\css
\fonts
\js
index.html

Answer 4

Si vous utilisez less , et qu'il ne charge pas la police des icônes, vous devez vérifier le chemin de la police allez dans le fichier variable.less et changer le @icon-font-path chemin, ça a marché pour moi.

Answer 5

Inclure les polices Copiez tous les fichiers de polices dans un répertoire /fonts près de votre CSS.

1. Inclure le CSS ou LESS Vous avez deux options pour activer les polices de caractères dans votre projet : vanilla CSS ou source LESS. Pour le CSS classique, il suffit inclure le fichier CSS compilé à partir du fichier /css dans le référentiel.
2. Pour LESS, copiez le .moins des fichiers de /moins dans votre répertoire existant Bootstrap existant. Ensuite, importez-le dans bootstrap.less via @import "bootstrap-glyphicons.less" ; . Recompilez quand vous êtes prêt.
3. Ajoutez des icônes ! Après avoir ajouté les polices et le CSS, vous pouvez commencer à utiliser les icônes. Par exemple, <span class="glyphicon glyphicon-ok"></span>

source