View of Glyphicon Bootstrap

Navigation
1

I have the following inconvenience when using the Bootstrap GlyphIcons.

At this time they are displayed as follows:

And I want it to look like this:

For those who do not understand what I want is to see the icon "in my opinion font-weight or f-w".

My code is as follows: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php echo RUTA;?>/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo RUTA;?>/css/style.css">
    <script src="<?php echo RUTA;?>/js/jquery.min.js"></script>
    <script src="<?php echo RUTA;?>/js/bootstrap.min.js"></script>
    <title>Login BoardRoster</title>
</head>
<body>


  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<?php echo RUTA; ?>"><img src="<?php echo RUTA; ?>/img/logo.png" alt="Nomina - OldMutual">
        </a>
      </div>
      <div id="menu" class="navbar-collapse collapse">
        <ul class="nav navbar-nav  navbar-right">
          <li class=""><a href="#">Home</a></li>
          <li><a href="#"><span class="glyphicon glyphicon-envelope"></span></a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>
</body>
</html>
    
asked by ByGroxD 27.02.2017 в 16:07
source

2 answers

3

If you look this Fiddle you'll see that it works.

You have to add the line that adds the styles of css for Glyphicons staying like this: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php echo RUTA;?>/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo RUTA;?>/css/style.css">

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css‌​/bootstrap-glyphicon‌​s.css">

    <script src="<?php echo RUTA;?>/js/jquery.min.js"></script>
    <script src="<?php echo RUTA;?>/js/bootstrap.min.js"></script>
    <title>Login BoardRoster</title>
</head>

Note : As we discussed in the comments it may be a failure of your php code that takes the route since bootstrap.min.css should contain Glyphicons

    
answered by 27.02.2017 / 16:42
source
-1

You should create a class in CSS and adding it to your element would be something like that 

#color{
color:#000;

}
    
answered by 27.02.2017 в 16:10
fatal error call to a member function prepare () on boolean in functions.php online 32 Error generating classes with xsd