Comment utiliser les glyphicons dans bootstrap 3.0

J'ai déjà utilisé des glyphicons dans bootstrap 2.3 mais maintenant je suis passé à bootstrap 3.0. À présent, je ne peux pas utiliser la propriété icon.

Dans bootstrap 2.3, la balise ci-dessous fonctionne

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

Dans bootstrap 3.0, cela ne fonctionne pas.

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

Le balisage est devenu:

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

ou

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

Voici une liste utile des modifications apportées à Bootstrap 3: http://bootply.com/bootstrap-3-migration-guide

Voilà:

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

Plus d'information:

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

Btw. vous pouvez utiliser cet outil de conversion , cela mettra également à jour le code des icônes:

Si vous téléchargez une distribution bootstrap 3 personnalisée, vous devez:

1. Téléchargez la distribution complète sur https://github.com/twbs/bootstrap/archive/v3.0.0.zip
2. Décompressez et téléchargez le dossier entier appelé fontsdans votre répertoire d'amorçage. Assemblé avec les autres dossiers "css, js".

Exemple avant:

\css
\js
index.html

Exemple après le téléchargement:

\css
\fonts
\js
index.html

Si vous utilisez less, et que cela ne charge pas la police des icônes, vous devez vérifier le chemin de la police, aller dans le fichier variable.less et changer le chemin @ icon-font- path, cela a fonctionné pour moi.

Bootstrap 3 nécessite une balise span pas i

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

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 dans votre projet: CSS vanille ou source LESS. Pour le CSS vanilla, incluez simplement le fichier CSS compilé du / css dans le référentiel.
2. Pour LESS, copiez les fichiers .less de / less dans votre répertoire Bootstrap existant. Puis importez-le dans bootstrap.less via @import "bootstrap-glyphicons.less";. Recompilez lorsque vous êtes prêt.
3. Ajoutez quelques icônes! Après avoir ajouté les polices et le CSS, vous pouvez utiliser les icônes. Par exemple,<span class="glyphicon glyphicon-ok"></span>

la source

Si vous utilisez grunt pour construire votre application, il est possible que lors de la génération, les chemins changent. Dans ce cas, vous devez modifier votre fichier grunt comme ceci:

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },

Téléchargez tous les fichiers à partir de bootstrap, puis incluez ce css

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>

Cela pourrait aider. Il contient de nombreux exemples qui seront utiles pour la compréhension.

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp