Comment utiliser glyphicons dans bootstrap 3.0

les icônes (glyphicons) sont maintenant contenues dans un fichier CSS séparé de .. .

le markup a changé en:

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

ou

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

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

et voilà:

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

plus d'informations:

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

Btw. vous pouvez utiliser cet outil de conversion , ce qui permettra également de mettre à jour le code pour les icônes:

si vous téléchargez un bootstrap 3 distro personnalisé, vous devez:

1. Téléchargez la distribution complète à 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. Mis avec les autres dossiers "css, js".

Exemple Avant:

\css
\js
index.html

Exemple Après Upload:

\css
\fonts
\js
index.html

si vous utilisez moins , et qu'il ne charge pas la police des icônes, vous devez vérifier le chemin de la police allez à la variable "fichier 151910920".moins et modifier le @icon-font-chemin chemin d'accès , qui ont travaillé pour moi.

Bootstrap 3 nécessite la balise span ai-je pas

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

incluez la copie des polices sur tous les fichiers de police dans le répertoire a /fonts près de votre CSS.

1. Inclure le CSS ou MOINS, Vous avez deux options pour activer les polices dans votre projet: vanilla CSS ou source LESS. Pour vanille CSS, juste inclure le fichier CSS compilé du /css dans le dépôt.
2. pour moins, copiez sur le .moins les fichiers de / moins dans votre existant Bootstrap directory. Puis l'importer dans bootstrap.moins via @import "bootstrap-glyphicons.moins"; . Recompilez quand vous êtes prêt.
3. ajoutez des icônes! Après avoir ajouté les polices et CSS, vous pouvez en utilisant les icônes. Par exemple, <span class="glyphicon glyphicon-ok"></span>

source

si vous utilisez grunt pour construire votre application, il est possible que pendant la construction 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 et ensuite inclure 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 comprendre.

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