CODEWITHSUNDEEP
twitter-bootstrapglyphicons
ddz1507
ddz1507

Reputation: 37

Bootstrap Glyphicons Not Showing on Local URL

I am a web designer and my laptop has limited space so I do not have the luxury of having multiple duplicates of bootstrap sitting in my laptop. Since I do not have Internet access if I'm working outside, I simply can't use CDN access like http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css in my source codes.

So to get around this, since I have Apache/PHP installed (using a Mac - Yosemite), I set up a virtual host to host some common libraries like jquery and bootstrap which I downloaded from their respective websites. The source code would look something like this:

<link href="http://cdn.dev/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="http://cdn.dev/bootstrap/3.3.1/css/bootstrap.min.js"></script>

While the jquerys and the bootstrap.min.js load fine, the glyphicons are not showing up correctly, but instead little square boxes. Is there something missing or I simply cannot use this method at all?

Upvotes: 3

Views: 4547

Answers (1)

Jake Taylor
Jake Taylor

Reputation: 4336

Glyphicons are actually a font-face kit. All of the symbols you see are not included in the CSS file but instead the CSS file directs them to a folder called "Fonts" that needs to be set up in the same place your Index file is set up. The Glyphicons or "fonts" then need to be downloaded from the bootstrap site and are included in the zip file downloaded from http://getbootstrap.com/getting-started/ These files must be in the Font folder located where your index file is in order for them to show up. Even on the Maxcdn site they have a folder with the glyphicons that the CSS is directed to in order to make them work.

Upvotes: 1

Related Questions