web-dev-qa-db-fra.com

Ajouter tous les glyphiques à Bootstrap 3

Je digine les glyphiques dans Bootstrap 3, mais on dirait qu'ils ne sont pas tous là! J'aimerais vraiment utiliser l'icône du bâtiment, mais Google n'a pas révélé grand-chose.

Est-ce que quelqu'un sait comment ajouter les glyphicons manquants à Bootstrap 3?

twitter-bootstrap-3glyphicons
20
lowe0292

Vous pouvez créer votre propre police personnalisée en utilisant le service gratuit: http://fontello.com/

Faites simplement glisser votre fichier glyphicons-halflings-regular.svg dans, choisissez les icônes que vous souhaitez utiliser et téléchargez une police personnalisée contenant uniquement ce dont vous avez besoin.

Fontello est préchargé avec les bibliothèques suivantes:

  • Fontelico
  • Police génial
  • Entypo
  • Typicons
  • Iconique
  • Pictogrammes modernes
  • Meteocons
  • MFG Labs
  • Maki
  • Zocial
  • Brandico
  • Insaisissable
  • Linecons
  • Symboles Web

Vous pouvez également acheter la version complète de Glyphicons pour 59 $ à l’adresse http://glyphicons.com/

19
Mike Causer

Je voulais utiliser les Glyphicons Pro que j'avais achetés, mais étendre le contenu actuel des halfelins à l'intérieur du bootstrap était compliqué. J'ai donc créé un fichier css distinct pour chaque jeu d'icônes (complet, types de fichiers et réseaux sociaux) et copié la méthode d'initialisation utilisée par bootstrap pour que je puisse utiliser une syntaxe similaire.

<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>

De cette façon, vous ne pouvez charger que ceux que vous voulez et quand vous voulez, et vous pouvez utiliser la configuration de bootstrap de Vanilla. Retrouvez mes fichiers ici: Gist @ GitHub

13
Jelby-John

J'ai acheté le jeu complet de Gylphicons de http://glyphicons.com/ et je voulais utiliser toutes les icônes disponibles. Si vous utilisez moins, vous devrez peut-être faire quelque chose de différent, je ne sais pas. 

Voici ce que j'ai fait et travaillé pour moi après avoir essayé diverses choses postées sur ce fil et d'autres sur le réseau stackexchange:

(1) Sauvegardé de mon fichier bootstrap.css original (j'ai modifié le mien, plus une bonne idée)

(2) Copie de tous les fichiers de polices standard glyphicons du répertoire/web/html_css/fonts dans le répertoire de polices où se trouvent mes fichiers de polices d’amorçage.

(3) À partir de la ligne 263ish de bootstrap.css, apportez les modifications comme suit: (le vôtre peut être légèrement différent)

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-regular.eot');
  src: url('../fonts/glyphicons-regular.eot?#iefix') 
  format('embedded-opentype'), url('../fonts/glyphicons-regular.woff') 
  format('woff'), url('../fonts/glyphicons-regular.ttf') 
  format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}

Ils doivent être dirigés vers les nouveaux fichiers de polices.

(4) Si vous voulez que tous les glyphes fassent comme moi, ouvrez le fichier dans le répertoire/web/html_css/css/intitulé glyphicons.css et copiez tous les css des glyhicons sauf la partie avec @ font-face {}. et le .glyphicon {} et collez-le dans un document texte vide.

(5) Vous devrez faire une recherche et remplacer (je l’ai fait quand même) pour .glyphicons, faites attention au (s) à la fin et remplacez par .glyphicon no (s) à la fin

(6) Ouvrez ensuite le fichier bootstrap.css et commentez ou supprimez tous les autres styles .glyphicon, quels que soient vos styles, puis collez-les dans vos nouveaux styles.

(7) Vous devrez peut-être supprimer la ligne située tout en bas du fichier qui pointe vers le fichier bootstrap.css.map. Je n'avais pas à le faire, mais vous en aurez peut-être besoin.

(8) Joyeux glyphing! 

NOTE Vous devriez être prêt à utiliser tous les glyhpicons maintenant. Gardez simplement à l'esprit que certains des noms des glyphicons sont différents de ceux du fichier d'amorçage d'origine. 

J'ai créé un référentiel pour le fichier CSS modifié: https://github.com/snowballrandom/bootstrap

0
toystory