Menu
Bootstrap novice here - I've read that Bootstrap expects glyphicons to be in the /fonts directory (by default).
I've downloaded files from glyphicons.com - over 1200 PNG files (they include Mac). The file names don't match - they have names like glyphicons-225-chevron-right.png ("s" and "-225") instead of glyphicon-chevron-right that my code calls for. I copied the "chevron-right" and "left files, changed the names to match, moved the files in "glyphicon" folder under "fonts", loaded the 1225 files directly into the "fonts" folder, etc.
I've searched, but no answers that work for me (Stackoverflow had the most hits). I've searched w3, Bootstrap, examined the source HTML from Bootswatch and others.
I am using bootstrap css files from Bootswatch, jquery from googleapis, js from bootstrapcdn.
Solution = add:
I do not know how it ended up in my code, but I found it (missing the closing >) near the bottom of the one example I found that did work.
The following clipped from the first answer worked (I think) the first time I tried it. Now it does not, even after I added the "bootstrap-glyphicons.css"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</body>
</html>
270
asked Jan 22 '26 07:01
You do not need any external glyphicons to make bootstrap glyphicons work. All of them are stored by default inside fonts folder.
so out of box bootstrap structure comes like this
/
css/
bootstrap.css
bootstrap.min.css
js/
bootstrap.js
bootstrap.min.js
fonts/
glyphicons-halflings-regular.woff
-etc.
index.html
Include bootstrap.css and it will load all of the glyphicons from '../fonts/' e.g. The code for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</body>
</html>
and it should work.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
