Glyphicon Search on button not displaying

Question

I'm new to doing front end design but I'm learning it so that I can apply simple designs to my projects. I'm using Bootstrap 3.3.7 and had no problems with the icons except when I tried to add "glyphicon glyphicon-search"icon.

I did some research but I noticed that most results suggest that I do,

<button type="submit" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-search" aria-hidden="true"> </span>
</button>

Unfortunately, it still won't display the search icon. Please help me resolve this.

I only get a blank button with no icon next to my search text field.

Answer 1

For the sake of helping others who are new and might encounter this, here's how I solved it.

If you downloaded the zipped file of bootstrap online and extracted it, you'll get 3 folders.

css
fonts
js

Don't forget to include the contents of each folder to their respective destination folders in your projects. Like what's shown in the screenshot below.

The files under fonts folder prepended by glyphicons-halflings... are needed to display icons.

I didn't paste these fonts files when I created the project which caused missing search icon.

I hope this will help.