CODEWITHSUNDEEP
csstwitter-bootstrap-3
Wizard
Wizard

Reputation: 22123

bootstrap's glyphicon does not manifest itself

I tried glyphicon example from official tutorial, 

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

However, it did not work as intended,

enter image description here

I have linked bootstrap with version 3.3.7

<link rel="stylesheet" href="{% static 'article/bootstrap.min.css' %}" />

I locate the problem

the code in bootstrap.css

@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.woff2') format('woff2'), 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: 0

Views: 54

Answers (1)

kravisingh
kravisingh

Reputation: 1670

Possibly you didn't include the required fonts to use glyphicon. If you do not want to add those font, then simply add cdn link of bootstrap css like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Hope this will help you.

Upvotes: 1

Related Questions