How to get glyphicons working in twitter-bootstrap?

问题

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?

回答1:

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

回答2:

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

回答3:

It works with no problems.

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

http://jsfiddle.net/3v1tyL61/

来源：https://stackoverflow.com/questions/29747963/how-to-get-glyphicons-working-in-twitter-bootstrap

标签

css

twitter-bootstrap

glyphicons