CODEWITHSUNDEEP
twitter-bootstrap
user5723483
user5723483

Reputation:

bootstrap glyphicon isn't showing on buttons

I am new to bootstrap. And I want to add some buttons.

I searched online for bootstrap buttons with icons and here is an example of what I used:

<button type="submit" class="btn btn-danger btn-block btn-sm" name="delete_row" onClick="return confirm('Are You Sure ?!!')">
      Delete
    </button>

The result was a red delete button with no icon in it.

I searched for it and they said, that I should use glyphicon, so I added this line of code to the button:

<span class="glyphicon glyphicon-remove-sign"></span>

enter image description here

This small square should be a like a trash can or something, but it is not showing properly.

I tried this too, but still the same result:

<span class="glyphicon glyphicon-trash"></span>Delete

Here is the library I use:

<link rel="stylesheet" href="assets/css/font.css">
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">

Upvotes: 1

Views: 7385

Answers (2)

user4276238
user4276238

Reputation:

Setup your fonts folder on the same level as your css folder, where bootstrap is located, and put the glyphicon fonts there. Then find the following lines in your bootstrap css file and make sure they also point to the font folder.

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Upvotes: 2

Jagdish Parmar
Jagdish Parmar

Reputation: 599

See example: fiddle

HTML

<button type="button" class="btn btn-danger">
 Delete<span class="glyphicon glyphicon-remove-sign"></span>
</button>

Upvotes: 0

Related Questions