Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 560
Jonathan M Avatar asked Apr 20 '15 12:04

Jonathan M


People also ask

How do I use Bootstrap Glyphicons?

In lines 15 and 17 the <span> and <a> element has the bootstrap glyphicon glyphicon-pencil classes, so to use any glyphicon in bootstrap: Use the <span> or <a> element. Set the class attribute of the <span> or <a> element as glyphicon then a space and then glyphicon-iconname.

Can I use Glyphicons in Bootstrap 5?

Available glyphs Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

Can I use Glyphicons in Bootstrap 4?

Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.

What can I use instead of Glyphicons?

The best alternatives to GLYPHICONS are InVision , Artify and Sketch Icons.


2 Answers

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

like image 195
Jonathan M Avatar answered Oct 12 '22 23:10

Jonathan M


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

like image 22
Kevin Leegsma Avatar answered Oct 12 '22 22:10

Kevin Leegsma