Bootstrap Glyphicons Not Showing on Local URL

3
votes

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?

1
twitter-bootstrapglyphicons
Do you have a font folder set up where your index file is? If so...are your glyphicons in this file? - Jake Taylor
@JakeTaylor No I don't. The idea is to have the virtual host work like if I were to use a full CDN URL. When I use the full CDN from MAXCDN, the glyphicons show up. - ddz1507
Right...so you're hosting the files on your pc and you're directing your html to the css and js on your pc as well correct? Sorry...your mac - Jake Taylor
@JakeTaylor Yes I host the files locally on my pc (or mac). Upon further investigation, I found this: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cdn.dev/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff. This can be fixed by moving the resource to the same domain or enabling CORS. So I guess this could be the problem? - ddz1507

1 Answers

1
votes

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.