html - cómo incluir glyphicons en bootstrap 3
html actionlink bootstrap glyphicon (1)
Creo que su problema particular no es cómo usar Glyphicons sino cómo los archivos Bootstrap funcionan juntos.
Bootstrap requiere una estructura de archivos específica para funcionar. Veo desde tu código que tienes esto:
<link href="bootstrap.css" rel="stylesheet" media="screen">
Su Bootstrap.css se está cargando desde la misma ubicación que su página, esto crearía un problema si no ajustaba la estructura de su archivo.
Pero primero, déjame recomendarte que configures la estructura de tu carpeta así:
/css <-- Bootstrap.css here
/fonts <-- Bootstrap fonts here
/img
/js <-- Bootstrap JavaScript here
index.html
Si lo notas, también es así como Bootstrap estructura sus archivos en su ZIP de descarga.
A continuación, incluye tu archivo Bootstrap de la siguiente manera:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
Dependiendo de la estructura de tu servidor o de lo que estés buscando.
El primero y el segundo son relativos al directorio actual de su archivo. El segundo es más explícito al decir "aquí" (./) primero, luego la carpeta css (/ css).
El tercero es bueno si está ejecutando un servidor web, y puede usar la notación raíz relativa ya que el "/" inicial siempre se iniciará en la carpeta raíz.
Entonces, ¿por qué hacer esto?
Bootstrap.css tiene esta línea específica para Glyphfonts:
@font-face {
font-family: ''Glyphicons Halflings'';
src: url(''../fonts/glyphicons-halflings-regular.eot'');
src: url(''../fonts/glyphicons-halflings-regular.eot?#iefix'') format(''embedded-opentype''), url(''../fonts/glyphicons-halflings-regular.woff'') format(''woff''), url(''../fonts/glyphicons-halflings-regular.ttf'') format(''truetype''), url(''../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular'') format(''svg'');
}
Lo que puede ver es que los Glyphfonts se cargan subiendo un directorio ... / y luego buscando una carpeta llamada /fonts y ENTONCES cargando el archivo de fuente.
La dirección URL es relativa a la ubicación del archivo CSS. Entonces, si su archivo CSS está en la misma ubicación como esta:
/fonts
Bootstrap.css
index.html
El archivo CSS va un nivel más profundo que buscar una carpeta /fonts .
Entonces, digamos que la ubicación real de estos archivos es:
C:/www/fonts
C:/www/Boostrap.css
C:/www/index.html
El archivo CSS estaría técnicamente buscando una carpeta en:
C:/fonts
pero tu carpeta está realmente en:
C:/www/fonts
Entonces mira si eso ayuda. No tiene que hacer nada ''especial'' para cargar Bootstrap Glyphicons, excepto asegurarse de que su estructura de carpetas esté configurada adecuadamente.
Cuando lo arregles, tu HTML debería ser simplemente:
<span class="glyphicon glyphicon-comment"></span>
Tenga en cuenta que necesita ambas clases. El glyphicon primera clase establece los estilos básicos, mientras que glyphicon-comment establece la imagen específica.
Esta pregunta ya tiene una respuesta aquí:
- Cómo usar glyphicons en bootstrap 3.0 9 respuestas
No he usado ninguno de los marcos bootstrap antes. Quiero incluir algunos de los glyphicons en bootstrap 3 en mi página. Por lo que entiendo, deberían incluirse en un archivo bootstrap.css que he agregado a mi página. Cuando he buscado en el archivo bootstrap.css sin embargo, ¿no veo ninguna referencia a ellos? Aunque es un archivo grande, es posible que haya olvidado algo.
Me he dado cuenta de que cuando abrí la carpeta dist descargada de bootstrap 3 hay una carpeta separada que contiene archivos con el nombre:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Parece que aquí es donde están los glyphicons, sin embargo, no sé cómo adjuntarlos a mi sitio. ¿Cómo adjunto los glyphicons a mi página?
Gracias por cualquier ayuda de antemano
El siguiente código muestra el archivo bootstrap.css adjunto:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet" media="screen">
</head>
y aquí está la parte del código html que muestra dónde deberían estar los glyphicons:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
Destinations</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>