Can I Get Bootstrap Glyphicons from a CDN?

Tom Baxter picture Tom Baxter · Dec 17, 2015 · Viewed 53.1k times · Source

I'm brand new to BS. I am retrieving v3.3.6 of the Bootstrap CSS and JS files from MaxCDN. I was hoping there would be a way to include the glyphicons as well but I can't see how to do that. Is it possible to retrieve the glyphicons from a CDN?

Also, I do not understand what the Bootstrap download page means when it refers to "Precompiled Bootstrap" Why would I want the precompiled download vs. the MaxCDN download. I see the precompiled provides the glyphicons so maybe that's the only reason.

Answer

MTCoster picture MTCoster · Dec 17, 2015

If you include the stylesheet bootstrap.min.css in your HTML file like this (for example):

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

Then the Glyphicons font(s) will automatically be downloaded from the same location:

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

This is because the fonts are loaded using relative URLs. When the CSS in bootstrap.min.css is parsed, the URL from which it was downloaded is used as the base, not your website's URL.

With regards to precompiled Bootstrap: This is useful if you want to host the files on your own web server (for some reason). They are made available as a zip file containing the correct directory structure required for the above behaviour to function correctly out of the box. It's labelled as precompiled, because you could alternatively download the source files. Although CSS and JavaScript files are considered source files in their own right, Bootstrap uses a precompiler on its CSS to make it easier for them to write the large files. They also use several smaller JavaScript files which are merged together for release by a build script. You can see this in action at their GitHub repository.