html - glyphicon - font awesome
Cómo incluir Glyphicons sin usar Bootstrap CSS (5)
Aquí hay un paquete de bower que puede usar solo glyphicons de bootstrap completo.
Verifique este repositorio de github https://github.com/ohpyupi/glyphicons-only-bootstrap
o
bower install glyphicons-only-bootstrap
EDITAR
Ahora es posible descargar el paquete a través de NPM.
npm install glyphicons-only-bootstrap
Mi proyecto de cliente usando algunos HTML y CSS básicos. Pero les gustan los Glyphicons en los menús del sitio web. Así que traté de incluir Glyphicons con Bootstrap CSS, pero el otro css se vio afectado luego de incluir el Bootstrap CSS.
Entonces la pregunta puede ser tonta, solo quiero incluir Glyphicons en los enlaces del menú del sitio web del cliente sin bootstrap css.
¿Es eso posible primero? Sé que Glyphicons gratis estará disponible con el paquete Bootstrap.
Y otras cosas es que mi cliente no quiere que incluya Bootstrap CSS porque está afectando la estructura de la página.
Entonces, ¿es posible incluir Glyphicons sin Bootstrap css o mi propio CSS personalizado?
¡Cualquier ayuda sería apreciada!
Hay esto:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
Sin embargo, si desea conservar algo de ancho de banda, puede cargar las fuentes directamente desde un CDN y luego alinear el CSS requerido, como este:
<style>
@font-face {
font-family: ''Glyphicons Halflings'';
src: url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot'');
src: url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix'') format(''embedded-opentype''),
url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2'') format(''woff2''),
url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff'') format(''woff''),
url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf'') format(''truetype''),
url(''//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular'') format(''svg'');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font: normal normal 16px/1 ''Glyphicons Halflings'';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
content: ''/e104'';
}
.glyphicon-eye-open:before {
content: ''/e105'';
}
</style>
Puede ver un ejemplo en la demostración aquí (elementos de menú "Ojo de Medusa" y "Lluvia de Fuego").
Intentaba hacer funcionar los glificones de Bootstrap sin instalar todo el archivo bootstrap.css, pero a mitad de camino se volvió demasiado trabajo y me rendí. En cambio, me encontré con Font Awesome . Bootstrap 3 lo usa (o solía usar). Está diseñado para ser utilizado como un dispositivo independiente por lo que es muy simple y ligero. Todo lo que tienes que hacer es:
Descargar el paquete Font Awesome;
Copia
font-awesome.min.cssen tu carpeta css y todos los archivos de fuente de la carpeta Fonts de Font Awesome en tu carpeta de fuentes;Incluya
<link rel="stylesheet" href="path/to/css/font-awesome.min.css">en el<head>de su HTML;Elija íconos de la biblioteca de íconos y colóquelos en su aplicación tal como lo haría con los glifos de Bootstrap.
Sí, solo necesita descargar desde esta página: http://glyphicons.com/ (opción gratuita a continuación)
EDITAR: En este hilo más información sobre esto: Bootstrap 3 Glyphicons CDN
Tuve el mismo problema con Bootstraps, solo necesito una flecha, pero la estropeé cuando la agregué.
¡Así que me mudé a FontAwesome, funcionó maravillosamente!
También puede obtener el CDN que se ve así:
<script src="https://use.fontawesome.com/2734t3et304.js"></script>
¡Tienes que conseguir el tuyo! :)