web-dev-qa-db-fra.com

Bootstrap 3 CDN de glyphiques

FAITES ATTENTION!

Les icônes Bootstrap sont de retour après cette fusion de demande d'extraction .

Après plusieurs allers et retours depuis quelques semaines, j'ai décidé de restaurer la police de l'icône Glyphicons dans le dépôt principal . Compte tenu de la prévalence des icônes dans les interfaces utilisateur, il est probablement mauvais pour la plupart des gens de ne pas les inclure (ou une autre police d'icônes) au même endroit que CSS et JS.

Avec cette mise à jour vient le suivant:

  • Restaure la documentation (sur la page Composants)
  • Nouvelles variables, @icon-font-path et @icon-font-name, pour plus de souplesse dans l'ajout et la suppression de polices d'icônes
  • Mises à niveau vers les derniers glyphiques (ajout de 40 nouvelles icônes)
  • Supprime la mention anciens Glyphicons de la page CSS

Nous travaillerons à l'amélioration de la personnalisation des polices d'icônes à l'avenir afin de faciliter l'échange des bibliothèques de polices (ce qui était la motivation principale de la suppression d'origine).

Quelle est l’URL du CDN de la nouvelle version de Twitter Bootstrap Glyphicons?

Du Bootstrap 3 ils ont été déplacés dans un référentiel séparé , mais je n'ai trouvé aucun CDN.

De la documentation officielle:

Avec le lancement de Bootstrap 3, les icônes ont été déplacées vers un référentiel distinct. Ainsi, le projet principal reste aussi léger que possible, il est plus facile pour les personnes d’échanger les bibliothèques d’icônes et les polices d’icônes Glyphicons sont plus facilement accessibles à un plus grand nombre de personnes en dehors de Bootstrap.

Sur le site officiel , ils ne fournissent pas d'URL CDN pour les icônes.

Où peut le trouver? Je ne souhaite pas télécharger le référentiel et l'inclure dans mon projet.

htmlcsstwitter-bootstrapcdntwitter-bootstrap-3
79
Ionică Bizău

Avec le récent version de bootstrap , et les glyphicons étant fusionnés dans le référentiel principal Bootstrap, Bootstrap CDN est maintenant en cours de traitement le css complet Bootstrap 3.0, y compris les glyphiques . La référence Bootstrap css est tout ce que vous devez inclure: Les glyphiques et leurs dépendances sont sur des chemins relatifs sur le site CDN et sont référencés dans bootstrap.min.css.

En html:

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

En css:

 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

Voici un travail démo.

Notez que vous devez utiliser .glyphicon classes au lieu de .icon:

Exemple:

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

Notez également que vous devez toujours inclure bootstrap.min.js pour utiliser les composants JavaScript Bootstrap, voir Bootstrap CDN pour l'URL.

Si vous souhaitez utiliser les Glyphicons séparément , vous pouvez le faire en référençant directement les CSS de Glyphicons sur Bootstrap CDN .

En html:

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

En css:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

Puisque le fichier css inclut déjà toutes les dépendances nécessaires de Glyphicons (qui sont dans un chemin relatif sur le site de CDN Bootstrap), l'ajout du fichier css est tout ce qu'il y a à faire pour commencer à utiliser Glyphicons.

Voici une démonstration ) des Glyphicons sans Bootstrap.

138
edsioufi

Une alternative serait d'utiliser Font-Awesome pour les icônes:

Y compris Font-Awesome

Ouvrez Font-Awesome sur CDNJS et copiez l’URL CSS de la dernière version:

<link rel="stylesheet" href="<url>">

Ou en CSS

@import url("<url>");

Par exemple (note, la version va changer):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Usage:

<i class="fa fa-bed"></i>

Il contient beaucoup d'icônes !

27
Ionică Bizău

Bien que Bootstrap CDN ait restauré les glyphicons sur bootstrap.min.css, Bootstrap les fichiers css Bootswatch de CDN n'incluent pas de glyphicons.

Par exemple thème Amelia: http://bootswatch.com/amelia/

Par défaut, Amelia a des glyphiques dans ce fichier: http://bootswatch.com/amelia/bootstrap.min.css

Mais le fichier css de Bootstrap CDN n'inclut pas les glyphiques: http://netdna.bootstrapcdn.com/bootswatch/3.0.0/amelia/bootstrap.min.css

Ainsi, comme @edsioufi l’a mentionné, vous devez inclure, vous devez inclure glphicons css, si vous utilisez des fichiers Bootswatch à partir de bootstrap CDN. Fichier: http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css

2
trante