Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I Get Bootstrap Glyphicons from a CDN?

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.

like image 628
Tom Baxter Avatar asked Dec 17 '15 17:12

Tom Baxter


People also ask

Where are bootstrap Glyphicons stored?

Where to find Glyphicons? Associated CSS rules are present within bootstrap. css and bootstrap-min. css files within css folder of dist folder.

How do I load Glyphicons in bootstrap?

You don't have to do anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately. Note, you need both classes. The first class glyphicon sets up the basic styles while glyphicon-comment sets the specific image. I would just add one more thing.

What can I use instead of Glyphicons?

Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switch from Less to Sass so you might integrate the font's Sass (SCSS) into your build process, to create a single CSS file for your projects.


1 Answers

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.

like image 74
MTCoster Avatar answered Oct 01 '22 03:10

MTCoster