1

Tengo el siguiente inconveniente a la hora de usar los GlyphIcons de Bootstrap.

En este momento se visualizan de la siguiente manera: introducir la descripción de la imagen aquí

Y quiero que se vea de la siguiente forma: introducir la descripción de la imagen aquí

Para los que no me entienden lo que quiero es que sea vea así el icono "a mi parecer font-weight o f-w".

Mi código es el siguiente:

<!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>
7
  • El icono que te aparece no es de Glyphicons... ¿Has sobrescrito la clase usando otro icono?
    – kerunaru
    Commented el 27 feb. 2017 a las 15:20
  • no la verdad no, lo unico que hice fue poner los CND de CSS Y JS de bootstrap, no he modificado nada, estoy usandolos tal cual vienen.
    – ByGroxD
    Commented el 27 feb. 2017 a las 15:21
  • ¿Podrías poner el HTML completo (incluyendo el <head>)?
    – kerunaru
    Commented el 27 feb. 2017 a las 15:22
  • en este fiddle si funciona... estás usando el archivo css correcto ?
    – lois6b
    Commented el 27 feb. 2017 a las 15:27
  • 2
    has probado añadiendo la linea <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css"> ??
    – lois6b
    Commented el 27 feb. 2017 a las 15:33

2 respuestas 2

4

Si miras este Fiddle verás que funciona.

Tienes que añadir la linea que agrega los estilos de css para Glyphicons quedando asi:

<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>

Nota:Como comentamos en los comentarios puede que sea fallo de tu codigo php que coge la ruta ya que bootstrap.min.css deberia contener Glyphicons

4
  • Pero el archivo bootstrap.min.css debería de incluir ya esos iconos, ¿no?
    – kerunaru
    Commented el 27 feb. 2017 a las 15:52
  • @kerunaru el problema puede ser de su codigo PHP, la ruta "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" deberia valer tambien, si. otro fiddle
    – lois6b
    Commented el 27 feb. 2017 a las 15:54
  • Y entonces... ¿De dónde sale el otro icono de correo, @ByGroxD? xD
    – kerunaru
    Commented el 27 feb. 2017 a las 15:56
  • No te va a leer, no le llega la notificacion por "@" si no es su publicacion o si no ha comentado. @kerunaru
    – lois6b
    Commented el 27 feb. 2017 a las 15:57
-1

Deberias de crear una clase en CSS y agregarsela a tu elemento seria algo asi

#color{
color:#000;

}
2
  • No, la verdad no funciono asi
    – ByGroxD
    Commented el 27 feb. 2017 a las 15:12
  • 1
    Se ve claramente que no es el mismo icono; cambiar el color del texto no funcionaría.
    – kerunaru
    Commented el 27 feb. 2017 a las 15:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.