bootstrap-4 - font - glyphicon glyphicon
Bootstrap 4-¿Migración de glifos? (8)
El archivo glyphicons.less de Bootstrap 3 está disponible en GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less
Necesita estas variables:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Luego puede convertir el archivo .less en un archivo .css que puede usar directamente. Puede hacerlo en línea en lesscss.org/less-preview/ . Aquí lo he hecho por usted , guárdelo como glyphicons.css e inclúyalo en sus archivos HTML.
<link href="/Content/glyphicons.css" rel="stylesheet" />
También necesita las fuentes Glyphicon que se encuentran en el paquete Bootstrap 3, colóquelas en un directorio / fonts /.
Ahora puedes seguir usando Glyphicons con Bootstrap 4 como de costumbre.
Tenemos un proyecto que usa glificones intensivamente. Bootstrap v4 elimina la fuente de glifos por completo.
¿Existe un equivalente para los íconos enviados con Bootstrap V4?
Ir
https://github.com/Darkseal/bootstrap4-glyphicons
descarga e incluye en tu código
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">
Migrar de Glyphicons a Font Awesome es bastante fácil.
Incluya una referencia a Font Awesome (ya sea localmente o use el CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Luego ejecute una búsqueda y reemplace donde busque
glyphicon glyphicon-
y reemplácelo con
fa fa-
.
La mayoría de los nombres de clase CSS son iguales.
Sin embargo, algunos han cambiado, por lo que debe corregirlos manualmente.
Para las personas que buscan soluciones de una sola línea, solo puede importar Bootstrap Glyphicons:
.treeview {
.glyphicon {
@extend .fa;
}
.glyphicon-minus {
@extend .fa-minus;
}
.glyphicon-plus {
@extend .fa-plus;
}
}
Puede usar Font Awesome y Github Octicons como una alternativa gratuita para Glyphicons.
Bootstrap 4 también cambió de Less a Sass, por lo que puede integrar el Sass de la fuente (SCSS) en su proceso de creación, para crear un solo archivo CSS para sus proyectos.
Consulte también https://getbootstrap.com/docs/4.1/getting-started/build-tools/ para saber cómo configurar sus herramientas:
- Descargue e instale Node, que usamos para administrar nuestras dependencias.
-
Navegue al directorio raíz
/bootstrapy ejecutenpm installpara instalar nuestras dependencias locales que figuran en package.json. -
Instale Ruby, instale Bundler con
gem install bundlery finalmente ejecutebundle install. Esto instalará todas las dependencias de Ruby, como Jekyll y complementos.
Font Awesome
- Descargue los archivos en https://github.com/FortAwesome/Font-Awesome/tree/fa-4
-
Copie la carpeta
font-awesome/scssen su carpeta / bootstrap -
Abra su SCSS
/bootstrap/bootstrap.scssy escriba el siguiente código SCSS al final de este archivo:$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss"; -
Tenga en cuenta que también debe copiar el archivo de
font-awesome/fontsdefont-awesome/fontsadist/fontso cualquier otra carpeta pública establecida por$fa-font-pathen el paso anterior -
Ejecute:
npm run distpara recompilar su código con Font-Awesome
Octicones Github
- Descargue los archivos en https://github.com/github/octicons/
-
Copie la carpeta de
octiconsen su carpeta/bootstrap -
Abra su SCSS
/bootstrap/bootstrap.scssy escriba el siguiente código SCSS al final de este archivo:$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss"; -
Tenga en cuenta que también debe copiar el archivo de
font-awesome/fontsdefont-awesome/fontsadist/fontso cualquier otra carpeta pública establecida por$fa-font-pathen el paso anterior -
Ejecute:
npm run distpara recompilar su código con Octicons
Glifos
En el sitio web de Bootstrap puedes leer:
Incluye más de 250 glifos en formato de fuente del conjunto Glyphicon Halflings. Los Glyphicons Halflings normalmente no están disponibles de forma gratuita, pero su creador los ha puesto a disposición de Bootstrap de forma gratuita. Como agradecimiento, solo le pedimos que incluya un enlace a Glyphicons siempre que sea posible.
Según tengo entendido, puede usar estos 250 glifos sin costo restringido para Bootstrap, pero no limitado a la versión 3 exclusiva. Así que también puedes usarlos para Bootstrap 4.
- Copie los archivos de fuentes de: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
-
Copie el archivo
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss
en su carpeta
bootstrap/scss - Abra su scss /bootstrap/bootstrap.scss y escriba el siguiente código SCSS al final de este archivo:
$bootstrap-sass-asset-helper: false;
$icon-font-name: ''glyphicons-halflings-regular'';
$icon-font-svg-id: ''glyphicons_halflingsregular'';
$icon-font-path: ''../fonts/'';
@import "glyphicons";
-
Ejecute:
npm run distpara recompilar su código con Glyphicons
Tenga en cuenta que Bootstrap 4 requiere el Autoprefixer posterior a CSS para la compilación. Cuando utilice un compilador Sass estático para compilar su CSS, deberá ejecutar el Autoprefixer después.
Puede encontrar más información sobre cómo mezclar con Bootstrap 4 SCSS here .
También puede usar Bower para instalar las fuentes anteriores.
El uso de Bower Font Awesome instala sus archivos en
bower_components/components-font-awesome/
también observe que Github Octicons establece los
octicons/octicons/octicons-.scss
como el archivo principal, mientras que debe usar
octicons/octicons/sprockets-octicons.scss
.
Todo lo anterior compilará todo su código CSS, incluido en un solo archivo, que requiere solo una solicitud HTTP. Alternativamente, también puede cargar la fuente Font-Awesome desde CDN, que también puede ser rápida en muchas situaciones. Ambas fuentes en CDN también incluyen los archivos de fuente (usando data-uri''s, posiblemente no es compatible con navegadores antiguos). Por lo tanto, considere qué solución se adapta mejor a su situación en función de, entre otros, los navegadores que admitirá.
Para Font Awesome, pegue el siguiente código en la sección
<head>
del HTML de su sitio:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Pruebe también el generador Yeoman para construir una aplicación web Bootstrap 4 front-end para probar Bootstrap 4 con Font Awesome o Github Octicons.
Si está utilizando Laravel 5.6, viene con Bootstrap 4. Todo lo que necesita es:
@import ''~open-iconic/font/css/open-iconic-bootstrap'';
En
/resources/assets/sass/app.scss
cambie la línea de importación de fuentes de Google en la línea 2 a
npm run watch
Todo lo que necesitas hacer ahora es
<link rel="stylesheet" href="{{asset(''css/app.css'')}}">
e incluir
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
encima del archivo de la hoja maestra y
<script src="{{asset(''js/app.js'')}}"></script>
antes de cerrar la etiqueta del cuerpo.
Obtendrás Bootstrap 4 e ícono.
El uso es
<span class="oi oi-cog"></span>
Consulte aquí los detalles del icono: Ícono abierto: recomendado por Bootstrap 4
Si está en otro proyecto que no sea Laravel, puede importar
@import ''node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'';
en tu archivo de estilo.
Espero que esto ayude. Feliz intento.
Si solo necesita clases de glifos en CSS:
@font-face{font-family:''Glyphicons Halflings'';src:url(''https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot'');src:url(''https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix'') format(''embedded-opentype''),url(''https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff'') format(''woff''),url(''https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf'') format(''truetype''),url(''https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular'') format(''svg'');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:''Glyphicons Halflings'';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
.glyphicon-asterisk:before{content:"/2a";}
.glyphicon-plus:before{content:"/2b";}
.glyphicon-euro:before{content:"/20ac";}
.glyphicon-minus:before{content:"/2212";}
.glyphicon-cloud:before{content:"/2601";}
.glyphicon-envelope:before{content:"/2709";}
.glyphicon-pencil:before{content:"/270f";}
.glyphicon-glass:before{content:"/e001";}
.glyphicon-music:before{content:"/e002";}
.glyphicon-search:before{content:"/e003";}
.glyphicon-heart:before{content:"/e005";}
.glyphicon-star:before{content:"/e006";}
.glyphicon-star-empty:before{content:"/e007";}
.glyphicon-user:before{content:"/e008";}
.glyphicon-film:before{content:"/e009";}
.glyphicon-th-large:before{content:"/e010";}
.glyphicon-th:before{content:"/e011";}
.glyphicon-th-list:before{content:"/e012";}
.glyphicon-ok:before{content:"/e013";}
.glyphicon-remove:before{content:"/e014";}
.glyphicon-zoom-in:before{content:"/e015";}
.glyphicon-zoom-out:before{content:"/e016";}
.glyphicon-off:before{content:"/e017";}
.glyphicon-signal:before{content:"/e018";}
.glyphicon-cog:before{content:"/e019";}
.glyphicon-trash:before{content:"/e020";}
.glyphicon-home:before{content:"/e021";}
.glyphicon-file:before{content:"/e022";}
.glyphicon-time:before{content:"/e023";}
.glyphicon-road:before{content:"/e024";}
.glyphicon-download-alt:before{content:"/e025";}
.glyphicon-download:before{content:"/e026";}
.glyphicon-upload:before{content:"/e027";}
.glyphicon-inbox:before{content:"/e028";}
.glyphicon-play-circle:before{content:"/e029";}
.glyphicon-repeat:before{content:"/e030";}
.glyphicon-refresh:before{content:"/e031";}
.glyphicon-list-alt:before{content:"/e032";}
.glyphicon-flag:before{content:"/e034";}
.glyphicon-headphones:before{content:"/e035";}
.glyphicon-volume-off:before{content:"/e036";}
.glyphicon-volume-down:before{content:"/e037";}
.glyphicon-volume-up:before{content:"/e038";}
.glyphicon-qrcode:before{content:"/e039";}
.glyphicon-barcode:before{content:"/e040";}
.glyphicon-tag:before{content:"/e041";}
.glyphicon-tags:before{content:"/e042";}
.glyphicon-book:before{content:"/e043";}
.glyphicon-print:before{content:"/e045";}
.glyphicon-font:before{content:"/e047";}
.glyphicon-bold:before{content:"/e048";}
.glyphicon-italic:before{content:"/e049";}
.glyphicon-text-height:before{content:"/e050";}
.glyphicon-text-width:before{content:"/e051";}
.glyphicon-align-left:before{content:"/e052";}
.glyphicon-align-center:before{content:"/e053";}
.glyphicon-align-right:before{content:"/e054";}
.glyphicon-align-justify:before{content:"/e055";}
.glyphicon-list:before{content:"/e056";}
.glyphicon-indent-left:before{content:"/e057";}
.glyphicon-indent-right:before{content:"/e058";}
.glyphicon-facetime-video:before{content:"/e059";}
.glyphicon-picture:before{content:"/e060";}
.glyphicon-map-marker:before{content:"/e062";}
.glyphicon-adjust:before{content:"/e063";}
.glyphicon-tint:before{content:"/e064";}
.glyphicon-edit:before{content:"/e065";}
.glyphicon-share:before{content:"/e066";}
.glyphicon-check:before{content:"/e067";}
.glyphicon-move:before{content:"/e068";}
.glyphicon-step-backward:before{content:"/e069";}
.glyphicon-fast-backward:before{content:"/e070";}
.glyphicon-backward:before{content:"/e071";}
.glyphicon-play:before{content:"/e072";}
.glyphicon-pause:before{content:"/e073";}
.glyphicon-stop:before{content:"/e074";}
.glyphicon-forward:before{content:"/e075";}
.glyphicon-fast-forward:before{content:"/e076";}
.glyphicon-step-forward:before{content:"/e077";}
.glyphicon-eject:before{content:"/e078";}
.glyphicon-chevron-left:before{content:"/e079";}
.glyphicon-chevron-right:before{content:"/e080";}
.glyphicon-plus-sign:before{content:"/e081";}
.glyphicon-minus-sign:before{content:"/e082";}
.glyphicon-remove-sign:before{content:"/e083";}
.glyphicon-ok-sign:before{content:"/e084";}
.glyphicon-question-sign:before{content:"/e085";}
.glyphicon-info-sign:before{content:"/e086";}
.glyphicon-screenshot:before{content:"/e087";}
.glyphicon-remove-circle:before{content:"/e088";}
.glyphicon-ok-circle:before{content:"/e089";}
.glyphicon-ban-circle:before{content:"/e090";}
.glyphicon-arrow-left:before{content:"/e091";}
.glyphicon-arrow-right:before{content:"/e092";}
.glyphicon-arrow-up:before{content:"/e093";}
.glyphicon-arrow-down:before{content:"/e094";}
.glyphicon-share-alt:before{content:"/e095";}
.glyphicon-resize-full:before{content:"/e096";}
.glyphicon-resize-small:before{content:"/e097";}
.glyphicon-exclamation-sign:before{content:"/e101";}
.glyphicon-gift:before{content:"/e102";}
.glyphicon-leaf:before{content:"/e103";}
.glyphicon-eye-open:before{content:"/e105";}
.glyphicon-eye-close:before{content:"/e106";}
.glyphicon-warning-sign:before{content:"/e107";}
.glyphicon-plane:before{content:"/e108";}
.glyphicon-random:before{content:"/e110";}
.glyphicon-comment:before{content:"/e111";}
.glyphicon-magnet:before{content:"/e112";}
.glyphicon-chevron-up:before{content:"/e113";}
.glyphicon-chevron-down:before{content:"/e114";}
.glyphicon-retweet:before{content:"/e115";}
.glyphicon-shopping-cart:before{content:"/e116";}
.glyphicon-folder-close:before{content:"/e117";}
.glyphicon-folder-open:before{content:"/e118";}
.glyphicon-resize-vertical:before{content:"/e119";}
.glyphicon-resize-horizontal:before{content:"/e120";}
.glyphicon-hdd:before{content:"/e121";}
.glyphicon-bullhorn:before{content:"/e122";}
.glyphicon-certificate:before{content:"/e124";}
.glyphicon-thumbs-up:before{content:"/e125";}
.glyphicon-thumbs-down:before{content:"/e126";}
.glyphicon-hand-right:before{content:"/e127";}
.glyphicon-hand-left:before{content:"/e128";}
.glyphicon-hand-up:before{content:"/e129";}
.glyphicon-hand-down:before{content:"/e130";}
.glyphicon-circle-arrow-right:before{content:"/e131";}
.glyphicon-circle-arrow-left:before{content:"/e132";}
.glyphicon-circle-arrow-up:before{content:"/e133";}
.glyphicon-circle-arrow-down:before{content:"/e134";}
.glyphicon-globe:before{content:"/e135";}
.glyphicon-tasks:before{content:"/e137";}
.glyphicon-filter:before{content:"/e138";}
.glyphicon-fullscreen:before{content:"/e140";}
.glyphicon-dashboard:before{content:"/e141";}
.glyphicon-heart-empty:before{content:"/e143";}
.glyphicon-link:before{content:"/e144";}
.glyphicon-phone:before{content:"/e145";}
.glyphicon-usd:before{content:"/e148";}
.glyphicon-gbp:before{content:"/e149";}
.glyphicon-sort:before{content:"/e150";}
.glyphicon-sort-by-alphabet:before{content:"/e151";}
.glyphicon-sort-by-alphabet-alt:before{content:"/e152";}
.glyphicon-sort-by-order:before{content:"/e153";}
.glyphicon-sort-by-order-alt:before{content:"/e154";}
.glyphicon-sort-by-attributes:before{content:"/e155";}
.glyphicon-sort-by-attributes-alt:before{content:"/e156";}
.glyphicon-unchecked:before{content:"/e157";}
.glyphicon-expand:before{content:"/e158";}
.glyphicon-collapse-down:before{content:"/e159";}
.glyphicon-collapse-up:before{content:"/e160";}
.glyphicon-log-in:before{content:"/e161";}
.glyphicon-flash:before{content:"/e162";}
.glyphicon-log-out:before{content:"/e163";}
.glyphicon-new-window:before{content:"/e164";}
.glyphicon-record:before{content:"/e165";}
.glyphicon-save:before{content:"/e166";}
.glyphicon-open:before{content:"/e167";}
.glyphicon-saved:before{content:"/e168";}
.glyphicon-import:before{content:"/e169";}
.glyphicon-export:before{content:"/e170";}
.glyphicon-send:before{content:"/e171";}
.glyphicon-floppy-disk:before{content:"/e172";}
.glyphicon-floppy-saved:before{content:"/e173";}
.glyphicon-floppy-remove:before{content:"/e174";}
.glyphicon-floppy-save:before{content:"/e175";}
.glyphicon-floppy-open:before{content:"/e176";}
.glyphicon-credit-card:before{content:"/e177";}
.glyphicon-transfer:before{content:"/e178";}
.glyphicon-cutlery:before{content:"/e179";}
.glyphicon-header:before{content:"/e180";}
.glyphicon-compressed:before{content:"/e181";}
.glyphicon-earphone:before{content:"/e182";}
.glyphicon-phone-alt:before{content:"/e183";}
.glyphicon-tower:before{content:"/e184";}
.glyphicon-stats:before{content:"/e185";}
.glyphicon-sd-video:before{content:"/e186";}
.glyphicon-hd-video:before{content:"/e187";}
.glyphicon-subtitles:before{content:"/e188";}
.glyphicon-sound-stereo:before{content:"/e189";}
.glyphicon-sound-dolby:before{content:"/e190";}
.glyphicon-sound-5-1:before{content:"/e191";}
.glyphicon-sound-6-1:before{content:"/e192";}
.glyphicon-sound-7-1:before{content:"/e193";}
.glyphicon-copyright-mark:before{content:"/e194";}
.glyphicon-registration-mark:before{content:"/e195";}
.glyphicon-cloud-download:before{content:"/e197";}
.glyphicon-cloud-upload:before{content:"/e198";}
.glyphicon-tree-conifer:before{content:"/e199";}
.glyphicon-tree-deciduous:before{content:"/e200";}
.glyphicon-briefcase:before{content:"/1f4bc";}
.glyphicon-calendar:before{content:"/1f4c5";}
.glyphicon-pushpin:before{content:"/1f4cc";}
.glyphicon-paperclip:before{content:"/1f4ce";}
.glyphicon-camera:before{content:"/1f4f7";}
.glyphicon-lock:before{content:"/1f512";}
.glyphicon-bell:before{content:"/1f514";}
.glyphicon-bookmark:before{content:"/1f516";}
.glyphicon-fire:before{content:"/1f525";}
.glyphicon-wrench:before{content:"/1f527";}
Visión de conjunto:
Estoy usando bootstrap 4 sin glifos. Encontré un problema con la vista de árbol de bootstrap que depende de los glificones. Estoy usando treeview tal como está, y estoy usando scss @extend para traducir los estilos de clase de ícono a estilos de clase increíbles. ¡Creo que esto es bastante hábil (si me preguntas)!
Detalles:
Usé scss @extend para manejarlo por mí.
Anteriormente decidí usar font-awesome sin una razón mejor de la que lo he usado en el pasado.
Cuando fui a probar la vista de árbol de bootstrap, descubrí que faltaban los íconos, porque no tenía glifos instalados.
Decidí usar la función scss @extend, para que las clases glyphicon usen las clases font-awesome así:
npm install and npm install open-iconic --save