bootstrap Glyphicons

Question

Bootstrap css utilise les halflings de Glyphicons . Si j'achetais leur gamme complète de produits, comment pourrais-je l'incorporer dans le cadre de bootstrap ?

Answer 1

Utilisez cette Générateur de sprites CSS en téléchargeant le fichier zip. Il créera 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.

Answer 2

Vous pouvez également utiliser le Font Awesome solution.

Grâce aux graphiques vectoriels évolutifs, les icônes sont superbes quelle que soit leur taille.

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

Answer 3

Vous devriez recalculer le positionnement de l'arrière-plan de chaque icône glyphe dans votre propre classe ou écraser les classes déjà définies par le bootstrap afin de les intégrer. Le bootstrap de Twitter utilise la version halfling (gratuite) des icônes qui font 14px tout autour, le jeu complet fait le double de la taille, donc l'ancienne version du bootstrap doit être utilisée. background-position's ne fonctionnera pas.

Voici un exemple de ce à quoi ressemble l'une des classes de l'icône bootstraps :

/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
    background-position: -216px -72px;
}

/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    width: 14px;
}

Answer 4

J'en ai également créé un sur Github. Je n'ai vu le message de Marco que plus tard.

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

Answer 5

Si je me souviens bien, Glyphicons ne fournit pas ses icônes en version sprite (plusieurs icônes en une seule image), mais vous recevez chaque icône séparément. Si vous ne prévoyez d'utiliser que quelques unes de leurs icônes, cela devrait être correct.

La meilleure solution serait de créer un fichier css distinct et de continuer à utiliser la convention de dénomination ".icon-".

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

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