Can I Get Bootstrap Glyphicons from a CDN?

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.


Regarding the Glythicon Question

With the new version of bootstrap (Bootstrap 4); Glythicons have been completely removed so consider them deprecated and try not to use them in current or future projects. With that said FontAwesome is an amazing, lightweight, library that has a nice CDN and is very easy to use.

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

If you wanna be lazy, and you should always try and be lazy! Use the code below, as with any link, paste into the head of your project to get started with it straight away!

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

FontAwesome is an extensive library of font icons that you can add to any DOM element via class calls. Its also very browser friendly and does not require any javascript to work.

Heres the getting started guide: https://fortawesome.github.io/Font-Awesome/get-started/

And here are the icon lists: https://fortawesome.github.io/Font-Awesome/icons/

Regarding the Precompiled vs CDN Question

If your not going to be modifying the library in any way for your project (which typically you shouldn't do any way) its always good to use a CDN over downloading it manually into your project. You will get significant performance gains and it lightens the load for your git repo.

One of the other benefits of the precompiled version is that it allows you to integrate the code directly into your frontend. If your using a node task runner like gulp or grunt you can take the code, alter it to match your theme or preferences, then fold it straight into your working code. This allows you to develop your own flavour of bootstrap.

Typically however the standard version is just fine as you can overwrite it with your own css later. If this is ok for you then just use the CDN as that will serve you a standard version of Bootstrap.

Hope this helps!


In the place of importing the whole Bootstrap you can import Bootstrap Glyphicons only:

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