Error when using Bootstrap Glyphicons

Question

Error when using Bootstrap Glyphicons

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

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 is the result of my code:

html twitter-bootstrap

asked by anonymous 07.04.2016 / 23:57

3 answers

Show note average result with Javascript Enable and disable JButton

score 3 · Answer 1

The font file was probably placed in a wrong folder.

First we will solve some errors, the order that used of the 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">

This file with .min.css is the version of the .css but compressed that should be used in production, use it if .min only in the development environment (if I make no mistake if I have the files .map both in production how much development you can use .min only).

Another thing you loaded the theme before the bootstrap, you 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 look 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 link documentation

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>

score 0 · Answer 2

You're 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 as per the above code.

score 0 · Answer 3

Watch out for the default Bootstrap folder structure. I'm almost sure that your problem stems from that. Put the print of your folder structure of your website, so we can check if the error is caused by failure to refer to used files (Bootstrap).