Error using Bootstrap Glyphicons

Question

Error using Bootstrap Glyphicons

Asked 8 years, 5 months ago

Viewed 682 times

0

So I’m calling the Bootstrap files:

<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">

Below, my HTML code:

 <sup>
   <div class="navbar-collapse collapse" id="navbar-collapse-01"      style="height: 2px;">
      <ul class="nav navbar-nav navbar-left">
        <li>
          <a href="#">Perfil</a>          
        </li>
        <li>
          <a href="#">Convidar</a>
        </li>       
      </ul>
   <div>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Logout</a>
        </li>
      </ul>
   </div>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Buscar">
        </div>
      </form>
   </div>    
  </nav> 
</div>
<div class="container">
   <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
  <nav class="navbar">
    <div class="navbar-collapse collapse" id="navbar-collapse-01" style="height: 2px;">
      <ul class="nav navbar navbar-left">
        <li>
          <a href="#">Pessoas</a>
        </li>
        <li>
          <a href="#">Empresas</a>
        </li>
        <li>
          <a href="#">Módulos</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Below, the result of my code:

3 answers

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2016-04-07T23:32:06+00:00

The font file was probably placed in a wrong folder.

First let’s solve some errors, the order you used of CSS is wrong:

<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

You loaded the bootstrap twice:

<link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

And loaded the theme twice:

<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">

That file with .min.css is the version of .css but compacted that should be used in production, use the .min only in the development environment (if I’m not mistaken if I have the files .map both in production and development you can use .min only).

Another thing you loaded the theme before bootstrap, have to load the bootstrap first, the result has to be this:

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

Then you should fix the folder structure problem, it should be like this:

projeto
├── index.html
├── js/
│   ├── bootstrap.min.js
│   └── jquery.min.js
├── css/
│   ├── bootstrap.min.css
│   └── bootstrap-theme.min.css
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

According to the documentation http://getbootstrap.com/getting-started/#Whats-included-Precompiled

And the whole html should look something like:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Exemplo</title>

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">

  </head>
  <body>
    <h1>Exemplo</h1>

    <!-- jQuery (é necessário pra rodar o bootstrap.js) -->
    <script src="js/jquery.min.js"></script>

    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

by user35364 · Answer 2 · 2016-04-07T22:17:59+00:00

You are probably forgetting to call the Bootstrap Javascript files, as below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>

Try to download this file and include it in your project as you did with the CSS files. Another option is to use it according to the above code.

by Milhomens • **291** points · Answer 3 · 2016-04-07T23:36:52+00:00

Watch out for the default Bootstrap folder structure. I’m pretty sure your problem stems from there. Print your folder structure of your website, so we can check if the error is being caused by a failure in referencing the used files (Bootstrap).