web-dev-qa-db-fra.com

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. Maintenant, 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.

html5css3twitter-bootstrap-3
86
Shivang Gupta

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

Le balisage a été modifié en:

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

ou

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

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

107
Zim

Voilà:

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

Plus d'informations:

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

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

29
TheNiceGuy

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

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

Exemple avant:

\css
\js
index.html

Exemple après téléchargement:

\css
\fonts
\js
index.html
19
Emiliano Díaz

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

6
alejandro

Bootstrap 3 nécessite une balise span non pas i

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

Si vous utilisez grunt pour créer votre application, il est possible que les chemins changent pendant la construction. 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
            }]
        }
    },
3
Anke Wenz

Inclure les polices Copiez tous les fichiers de polices dans un répertoire/polices à proximité 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 Vanilla CSS, incluez simplement le fichier CSS compilé à partir de /css dans le référentiel.
  2. Pour MOINS, copiez les fichiers . Less de /less dans votre répertoire Bootstrap existant. Puis importez-le dans bootstrap.less via @ import "bootstrap-glyphicons.less"; . Recompiler lorsque vous êtes prêt.
  3. Ajoutez des icônes! Une fois que vous avez ajouté les polices et CSS, vous pouvez utiliser les icônes. Par exemple, <span class="glyphicon glyphicon-ok"></span>

source

3
Mark Anthony Uy

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

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

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

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

0
Mushu