CODEWITHSUNDEEP
csstwitter-bootstrapglyphicons
Jonathan M
Jonathan M

Reputation: 17441

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?

Upvotes: 5

Views: 15671

Answers (3)

Kevin Leegsma
Kevin Leegsma

Reputation: 176

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

Upvotes: 1

Jonathan M
Jonathan M

Reputation: 17441

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

Upvotes: 6

naoxink
naoxink

Reputation: 597

It works with no problems.

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

http://jsfiddle.net/3v1tyL61/

Upvotes: -2

Related Questions