How are character icons loaded in / fonts?
The solution is below.
Bootstrap newbie here - I read that Bootstrap expects glyphicons to be in the / fonts directory (default).
I downloaded files from glyphicons.com - over 1200 PNG files (including Mac). The filenames don't match - they have names like glyphicons-225-chevron-right.png ("s" and "-225") instead of glyphicon-chevron-right, which is what my code does. I copied the "chevron-right" and "left files", changed the names to match, moved the files to the "glyphicon" folder under "fonts", uploaded 1225 files directly to the "fonts" folder, etc.
I have searched but no answers that work for me (Stackoverflow had the most hits). I searched for w3, Bootstrap, looked into the original HTML from Bootswatch and others.
I am using bootstrap css files from Bootswatch, jquery from googleapis, js from bootstrapcdn.
Solution = add:
I don't know how it ended up in my code, but I found it (no closure>) at the bottom of one example I found that worked.
The first time I tried it I worked (as it seems to me) the following. Now this is not the case even after I added "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>
source to share
You don't need any external glyphicons for the bootstrap glyphs to work. They are all stored by default inside the font folder.
so from the bootstrap structure in the box it looks like
/ 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 glyphicons from "../fonts/" eg 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.
source to share