Puis-je Obtenir Bootstrap Glyphicons à partir d'un CDN?

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

Aussi, je ne comprends pas ce que Bootstrap page de téléchargement signifie quand il se réfère à "Précompilés Bootstrap" Pourquoi voudrais-je le télécharger précompilés contre la MaxCDN télécharger. Je vois le précompilés fournit les glyphicons peut-être que c'est la seule raison.

OriginalL'auteur Tom Baxter | 2015-12-17

  1. 16

    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">

    Puis les Glyphicons police(s) seront téléchargés automatiquement à 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

    C'est parce que les polices sont chargés à l'aide d' relative Url. Quand le CSS dans bootstrap.min.css est analysée, l'URL à partir de laquelle il a été téléchargé est utilisé comme la base, non de votre site web URL.

    En ce qui concerne précompilés Bootstrap: Ceci est utile si vous souhaitez héberger les fichiers sur votre serveur web (pour certaines raisons). Ils sont disponibles sous forme d'un fichier zip contenant la structure de répertoire correct requis ci-dessus par le comportement de fonctionner correctement hors de la boîte. Il est étiqueté comme précompilés, parce que vous pouvez également télécharger les fichiers source. Bien que les fichiers CSS et JavaScript sont considérés comme des fichiers source dans leur propre droit, Bootstrap utilise un précompilateur sur son CSS pour le rendre plus facile pour eux d'écrire les fichiers de grande taille. Ils utilisent également plusieurs petits fichiers JavaScript qui sont fusionnés ensemble pour la libération par un script de compilation. Vous pouvez le voir en action à leur dépôt GitHub.

    OriginalL'auteur MTCoster

  2. 9

    Concernant la Glythicon Question

    Avec la nouvelle version de bootstrap (Bootstrap 4); Glythicons ont été complètement supprimé de manière à les considérer obsolète, et essayez de ne pas les utiliser dans les projets actuels ou futurs. Cela dit FontAwesome est étonnant, léger, de la bibliothèque qui a une belle CAN et est très facile à utiliser.

    CA
    https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

    Si vous voulez être paresseux, et vous devriez toujours essayer d'être paresseux! Utilisez le code ci-dessous, comme avec n'importe quel lien, collez-le dans la tête de votre projet pour obtenir commencé avec elle tout de suite!

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    FontAwesome est une vaste bibliothèque de polices d'icônes que vous pouvez ajouter à n'importe quel élément du DOM via des appels de classe. Il est aussi très navigateur convivial et ne nécessite pas de tout javascript pour fonctionner.

    Heres le guide de mise en route:
    https://fortawesome.github.io/Font-Awesome/get-started/

    Et voici l'icône de listes:
    https://fortawesome.github.io/Font-Awesome/icons/

    Concernant la Précompilés vs CDN Question

    Si votre ne va pas être la modification de la bibliothèque en aucune façon pour votre projet (qui, en général, vous ne devriez pas le faire de toute façon) il est toujours bon d'utiliser un CDN sur le téléchargement manuellement dans votre projet. Vous obtiendrez des gains de performance significatifs et il allège la charge de votre repo git.

    L'un des autres avantages de la version compilée est qu'il vous permet d'intégrer directement le code dans votre interface. Si votre utilisation d'un nœud task runner comme gulp ou grunt vous pouvez prendre le code, le modifier pour correspondre à votre thème ou vos préférences, puis les incorporer directement dans votre code de travail. Cela vous permet de développer votre propre saveur de bootstrap.

    Généralement la version standard est très bien comme vous pouvez le remplacer par votre propre feuille de style css plus tard. Si c'est ok pour vous, alors utilisez simplement la CAN qui va vous servir d'une version standard de Bootstrap.

    Espérons que cette aide!

    Bootstrap et font-awesome vont ensemble comme le sel et le poivre.
    Vous devez supprimer la https: dans le <link> balise pour une meilleure compatibilité que par cette question.
    Merci pour cette remarque. Faites le protocole de liaison agnostique 🙂

    OriginalL'auteur Jonjoe

  3. 0

    Pour quiconque fait cela dans les Rails à l'aide de bootstrap-sass gem, vous ne serez pas, y compris le principal bootstrap de la feuille de style manuellement en html, et vous ne pouvez pas redéfinir l'icône $-font-chemin à faire, que le domaine sera finissent remplacé par votre application.

    Au lieu de redéfinir le @font-face déclaration pour les Glyphicons après l'importation de bootstrap. Ainsi, 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é ceci pour être nécessaire lors de l'utilisation de Heroku du pipeline afin d'éviter ces chemins étant compilé pour la mise en scène de l'app, résultant dans la production de l'app qui pointe à la mise en scène à la charge Glyphicons.

    OriginalL'auteur AFOC