5

I've got bootstrap files stored locally:

<link rel="stylesheet" href="/bootstrap/3.2.0/css/bootstrap.min.css">

and

<script src="/bootstrap/3.2.0/js/bootstrap.min.js"></script>

but when I do this:

<span class="glyphicon glyphicon-print" aria-hidden="true"></span>

I get a little square character such as is displayed when the client doesn't have the proper font. I read here that there's separate CSS, but the link is broken. Any ideas how to resolve this?

Community
  • 1
  • 1
Jonathan M
  • 17,145
  • 9
  • 58
  • 91
  • 1
    Glyphicons are included in the default bootstrap.min.css – make sure you're not using plugins, such as NoScript, which might block loading of external font files – knittl Apr 20 '15 at 12:37
  • 1
    @knittl, do I have to download font files also? I've got the files stored locally. – Jonathan M Apr 20 '15 at 12:44
  • 2
    @JonathanM Yes, you need to download the font files as well. – RevanProdigalKnight Apr 20 '15 at 13:03
  • hope you are not including necessary font – Anto S Apr 20 '15 at 13:09
  • @imaphpdeveloper, can you explain. I'm not sure I understand what you mean by your comment. – Jonathan M Apr 20 '15 at 13:10
  • 2
    @JonathanM: yes, you need the files locally. Your original question used the css from maxcdn, which would know where to find the required font files. – knittl Apr 20 '15 at 13:15
  • @JonathanM what I mean, if you use bootsstrap you will have fonts folder and inside you can find glyphicons-halflings-regular.eot etc.. That may not be included I said – Anto S Apr 20 '15 at 13:26
  • you can refer this as well http://stackoverflow.com/questions/20279512/how-do-bootstrap-glyphicons-work – Anto S Apr 20 '15 at 13:27

3 Answers3

6

Found it:

Needed to locally create:

/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.ttf
/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.svg

which I sourced from here:

http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.ttf http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.svg

Jonathan M
  • 17,145
  • 9
  • 58
  • 91
  • 1
    If you go to http://getbootstrap.com/getting-started/#download and press `Download Bootstrap` it will come with a folder that has `css, fonts, js`. You shouldn't have to download each from the CDN, seems a bit backwards to me. – Tim Lewis Apr 20 '15 at 13:20
  • @Tim, yeah, I think I just ignored the /fonts folder when I originally downloaded. I definitely went about it backwards. – Jonathan M Apr 20 '15 at 16:38
  • 1
    It's easy enough to miss. I was familiar with Font Awesome before I knew about glyphicons, so I knew they were technically a font, but I can see how it could be overlooked. Glad you got it working though! – Tim Lewis Apr 20 '15 at 16:52
1

There is Jonathan, inside the bootstrap download you should have the following file structure (unless you selected NOT to download glyphicons as a component)

css -> bootstrap.css, bootstrap.css.map, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.css.map, bootstrap-theme.min.css
fonts -> glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff, glyphicons-halflings-regular.woff2
js -> bootstrap.js, bootstrap.min.js, npm.js

If you dont have that, i'd recommend going to http://getbootstrap.com/getting-started/#download and downloading the package. Linking it up inside your own folder is easy. Just rename the Bootstrap CSS folder to 'Bootstrap' then drag it to your CSS folder in your file (you can take the files directly, but having the folder as CSS/Bootstrap/bootstrapCSSfiles it just makes it more organized. Do that again for JS and Fonts and you're all set.

Goodluck bud :D

Kevin Leegsma
  • 176
  • 8
-2

It works with no problems.

<span class="glyphicon glyphicon-print" aria-hidden="true"></span>

http://jsfiddle.net/3v1tyL61/

naoxink
  • 595
  • 1
  • 12
  • 19
  • Sorry, I posted wrong info. Revised the question. I've got the bs files stored locally. Is there a font folder I should also have? – Jonathan M Apr 20 '15 at 12:43
  • @MacKentoch, do I need to download the font? – Jonathan M Apr 20 '15 at 12:45
  • 1
    Ah, I think I found it. I was missing: /fonts/glyphicons-halflings-regular.eot Downloaded the original from here: http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.eot – Jonathan M Apr 20 '15 at 12:49