CODEWITHSUNDEEP
htmlcsstwitter-bootstrapglyphicons
Steve Morin
Steve Morin

Reputation: 156

Glyphicon showing as box with hex code inside

I'm having trouble with the collapse button. I am trying to display a glyphicon on the button and make it change when i click on it. A right arrow and down arrow when collapsed. On other pages the glyphicons work. This one though is on the navbar. It is showing as a box with the hex code inside. I have been looking at questions for a couple of hours now and they pretty much missed the font-family. I have a part that is working so it's different and i can't find the problem.

<button type="button" aria-expanded="false" class="btn navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
    <span class="sr-only">Ouvrir la navigation</span>
</button>

this is the css part where the glyphicons are working :

.liens:before {
    content: "\e144";
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    float: left;
    margin-top: 0;
    margin-left: -20px;
    color: #2A3E53;
}

enter image description here

I can see the glyphicon on each item in the ul but on the nav I have the exact same css but it shows as a box with hex code for it ie: e250

button.btn.collapsed:before {
    content: "\e250";
    font-family: 'Glyphicons Halflings' !important;
    font-size: 12px;
    float: left;
    color: #2A3E53;
}
button.btn:before {
    content: "\e252";
    font-family: 'Glyphicons Halflings' !important;
    font-size: 12px;
    float: left;
    color: #2A3E53;
}

This is what i get :

enter image description here

Upvotes: 0

Views: 2384

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

You can explore how the bootstrap.css file defines the Glyphicons Halflings font-family:

@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');
}

So I guess you need to check the path to glyphicons-halflings-regular.* files.

I've used Bootstrap's default navbar as a sample, deleted the .btn class and simplified your CSS. Please check the result. Is it what you want to achieve?

.navbar-toggle:after {
  content: "\e252"; /* glyphicon-triangle-bottom */
  font-family: 'Glyphicons Halflings';
}
.navbar-toggle.collapsed:after {
  content: "\e250"; /* glyphicon-triangle-right */
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-example" aria-expanded="false">
        <span class="sr-only">Ouvrir la navigation</span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-example">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions