3

Estoy usando Bootstrap de manera local, lo descargué con el archivo fonts. Quisiera implementar los glyphicons de Boostrap, pero sin que se me modifique toda la página.

introducir la descripción de la imagen aquí

Estos son los archivos que utilizo. Al enlazarlos, me modifica toda la página, pero sí me pone los íconos. Quisiera saber cómo implementar los glyphicon sin que se me modifique todo lo demás.

<!DOCTYPE html>
<html lang="es">

<head>

  <meta charset="UTF-8">
  <title>(Modificaci&oacute;n)</title>

  <!--Se inician los estilos bootstap-->
  <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../bootstrap/fonts/glyphicons-halflings-regular.eot">
  <link rel="stylesheet" type="text/css" href="../bootstrap/fonts/glyphicons-halflings-regular.html">
  <link rel="stylesheet" type="text/css" href="../bootstrap/fonts/glyphicons-halflings-regular.woff">
  <link rel="stylesheet" type="text/css" href="../bootstrap/fonts/glyphicons-halflings-regular.woff2">
  <!--Fin de estilos Bootstrap-->

  <!--Estilos propios-->
  <link rel="stylesheet" type="text/css" href="../estilos/estilos.css">
  <!--Fin de estilos propios-->

</head>

<body>

  <!--Inicio del contenedor de la cabecera-->
  <nav class="navbar navbar-expand-lg navbar-light bg-wgite">

    <a class="navbar-brand" href=""><img src="../imagenes/sennova-girardot.png" class="isologo_grupo"></a>

    &nbsp;

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">

      <ul class="navbar-nav mr-auto">
        <?php
				$enlaces=$mysqli->query("SELECT * FROM enlaces");
				while ($e=mysqli_fetch_array($enlaces)) {

					if ($e['estado_enlace']=="habilitado") {
						
						if ($e['id_enlace']==1) {

							?>

          <li class="nav-item active">
            <a class="nav-link navbar-brand" href="<?php echo $e['link_enlace']; ?>">
              <?php echo $e["nombre_enlace"]; ?> <span class="sr-only"><?php echo $e["nombre_enlace"]; ?></span></a>
          </li>

          <?php

						}else{

							?>

          <li class="nav-item">
            <a class="nav-link navbar-brand" href="./cambio/<?php echo $e['link_enlace']; ?>">
              <?php echo $e["nombre_enlace"]; ?> <span class="sr-only"><?php echo $e["nombre_enlace"]; ?></span></a>
          </li>

          <?php
						}

					}else{

						?>

          <li class="nav-item">
            <div class="nav-link navbar-brand">
              <?php echo $e["nombre_enlace"]; ?> <span class="sr-only"><?php echo $e["nombre_enlace"]; ?></span></div>
          </li>

          <?php

					}

				}
				?>

      </ul>

    </div>

  </nav>
  <!--Fin de la cabecera.-->
  
  <button type="button" class="btn btn-info">Actualizar sección&nbsp;<span class="glyphicon glyphicon-arrow-up"></span>

  <!--Se inician los scripts-->
  <script type="text/javascript" src="../script/jquery.min.js"></script>
  <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
  <!--Se finalizan los llamados de scripts-->
</body>

</html>
<!--Se finaliza el HTML5-->

Esta es la forma en que los enlazo y un ejemplo de botones que utilizo; en incluso, en ocasiones resulta que enlazando todo eso, no funciona correctamente. También he intentado enlazar a través de un link (<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">), pero se me modifica todo el resto de la página. Para aclarar, uso la última versión de Bootstrap descargable de la página.

3
  • Solo basta que metas el bootstrap.min.css en la cabecera y el bootstrap.min.js en el pie (si es que lo ocupas o mete solo los componentes individuales que necesites). El bootstrap.min.css se encarga de importarlos por si mismo. Yo lo uso así: <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    – PAGANA
    Commented el 1 sept. 2019 a las 17:27
  • Gracias. Lo intentaré. Muchas gracias, de verdad.
    – Saco04
    Commented el 1 sept. 2019 a las 18:00
  • 1
    La recomendación de @PAGANA te va a cambiar el estilo visual de tu página, que es justo lo que no deseas, tampoco funciona con sólo agregar los componentes que desees, pues recordemos que Bootstrap cambió de Less a Sass en su versión 4. Lo mejor que puedes hacer es revisar esta respuesta del sitio en inglés y si tienes alguna duda, volver aquí y editar tu pregunta con el avance que hayas logrado Commented el 2 sept. 2019 a las 19:50

1 respuesta 1

0

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

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.