web-dev-qa-db-fra.com

Comment inclure des glyphiques sans utiliser Bootstrap CSS

Projet My Client utilisant des bases HTML et CSS. Mais ils aiment les glyphiques sur les menus du site. Donc, je viens d'essayer d'inclure des glyphiques avec le CSS Bootstrap, mais les autres CSS ont été affectés après l'inclusion du CSS Bootstrap. 

La question peut donc être idiote, je veux simplement inclure Glyphicons dans les liens de menu du site Web client sans bootstrap css. 

Est-ce possible en premier? Je sais que Glyphicons free sera disponible avec le package Bootstrap. 

Et d’autres choses, c’est que mon client ne souhaite pas que j’inclue Bootstrap CSS, car cela affecte la structure de la page. 

Est-il donc possible d'inclure des glyphiques sans Bootstrap css ou mon propre css personnalisé?

Toute aide serait appréciée!

htmlcsstwitter-bootstraptwitter-bootstrap-3glyphicons
16
Raja

Voici un paquet bower que vous ne pouvez utiliser que des glyphicons en dehors du bootstrap. 

Vérifiez ce dépôt github https://github.com/ohpyupi/glyphicons-only-bootstrap

ou

bower install glyphicons-only-bootstrap

MODIFIER

Il est maintenant possible de télécharger le package via NPM.

npm install glyphicons-only-bootstrap
6
supergentle

J'essayais de faire fonctionner les glyphiques de Bootstrap sans installer le fichier entier bootstrap.css, mais au milieu, cela devenait trop de travail et j'ai abandonné. Au lieu de cela, je suis tombé sur Font Awesome . Bootstrap 3 lui-même l'utilise (ou l'utilisait). Il est conçu pour être utilisé de manière autonome, ce qui le rend très simple et léger. Tout ce que tu dois faire est:

  1. Télécharger le paquet Font Awesome;

  2. Copiez font-awesome.min.css dans votre dossier css et tous les fichiers de polices du dossier de polices de Font Awesome dans votre dossier de polices;

  3. Incluez <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> dans le <head> de votre code HTML;

  4. Choisissez des icônes dans la bibliothèque d'icônes et insérez-les dans votre application comme vous le feriez avec les glyphicons de Bootstrap.

12
Arthur Tarasov

Il y a ceci:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

Cependant, si vous souhaitez économiser de la bande passante, vous pouvez charger les polices directement à partir d'un CDN, puis insérer le CSS requis, comme ceci:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

Vous pouvez voir un exemple dans la démo ici (éléments de menu "Eye of Medusa" et "Rain of Fire").

9
thdoan

Oui, il vous suffit de télécharger à partir de cette page: http://glyphicons.com/ (option gratuite ci-dessous)

EDIT: Dans ce fil plus d’informations sur ce sujet: Bootstrap 3 Glyphicons CDN

1
Alejandro Garrido

aller à la feuille de triche glyphicons [ https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
0
Naved Khan

J'ai eu le même problème avec Bootstraps, j'ai juste besoin d'une flèche mais je le gâche quand il est ajouté.

J'ai donc déménagé chez FontAwesome et j'ai travaillé à merveille!

Vous pouvez également obtenir le CDN qui ressemble à ceci:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

Vous devez obtenir le vôtre! :)

0
George