web-dev-qa-db-fra.com

Puis-je obtenir des glyphiques bootstrap depuis un CDN?

Je suis nouveau chez BS. Je récupère la v3.3.6 des fichiers Bootstrap CSS et JS à partir de MaxCDN. J'espérais qu'il y aurait un moyen d'inclure les glyphicons également, mais je ne vois pas comment faire cela. Est-il possible de récupérer les glyphicons d'un CDN?

De plus, je ne comprends pas ce que la page de téléchargement Bootstrap signifie quand il fait référence à "Bootstrap précompilé" Pourquoi voudrais-je le téléchargement précompilé par rapport au téléchargement MaxCDN. Je vois que les glyphiques sont précompilés, alors c’est peut-être la seule raison. 

twitter-bootstrapcdnglyphicons
14
Tom Baxter

Si vous incluez la feuille de style bootstrap.min.css dans votre fichier HTML comme ceci (par exemple):

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

Ensuite, la ou les polices Glyphicons seront automatiquement téléchargées à partir du même emplacement:

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff
//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2

En effet, les polices sont chargées à l'aide d'URL relative. Lorsque le CSS dans bootstrap.min.css est analysé, l'URL à partir de laquelle il a été téléchargé est utilisé comme base, et non l'URL de votre site Web.

En ce qui concerne precompiled Bootstrap: cela est utile si vous souhaitez héberger les fichiers sur votre propre serveur Web (pour une raison quelconque). Ils sont disponibles sous forme de fichier Zip contenant la structure de répertoires correcte requise pour que le comportement ci-dessus fonctionne correctement. Il est étiqueté comme étant précompilé, car vous pouvez également télécharger les fichiers source. Bien que les fichiers CSS et JavaScript soient considérés comme des fichiers source à part entière, Bootstrap utilise un compilateur precompiler sur son CSS pour faciliter l’écriture des gros fichiers. Ils utilisent également plusieurs fichiers JavaScript plus petits qui sont fusionnés pour publication par un script de construction. Vous pouvez voir cela en action sur leur référentiel GitHub .

15
MTCoster

Pour ceux qui font cela dans Rails en utilisant bootstrap-sass gem, vous n'incluerez pas la feuille de style d'amorçage principale manuellement au format HTML, et vous ne pourrez pas redéfinir $ icon-font-path pour y parvenir, car le domaine sera fini remplacé par celui de votre application. 

Au lieu de cela, redéfinissez la déclaration @ font-face pour Glyphicons après l’importation de bootstrap. Donc, dans stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";

@font-face{
  font-family:'Glyphicons Halflings';
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot");
  src:url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff") format("woff"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf") format("truetype"),
  url("https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular") format("svg")
}

J'ai trouvé cela nécessaire lors de l'utilisation du pipeline de Heroku pour éviter que ces chemins ne soient compilés pour l'application de transfert, ce qui a pour effet que l'application de production renvoie à la mise en scène pour charger des glyphiques.

0
AFOC