Bootstrap 4: ¿migración de glifos?

Tenemos un proyecto que usa glyphicons intensivamente. Bootstrap v4 suelta la fuente de glyphicon por completo.

¿Hay un equivalente para los icons enviados con Bootstrap V4?

Registro de cambios

http://v4-alpha.getbootstrap.com/migration/

Puede utilizar tanto Font Awesome como Github Octicons como una alternativa gratuita para Glyphicons.

Bootstrap 4 también cambió de Less a Sass, por lo que puede integrar el Sass (SCSS) de la fuente en su proceso de comstackción, para crear un único archivo CSS para sus proyectos.

También vea https://getbootstrap.com/docs/4.1/getting-started/build-tools/ para descubrir cómo configurar sus herramientas:

  1. Descargue e instale Node, que usamos para administrar nuestras dependencias.
  2. Navegue hasta el directorio raíz /bootstrap y ejecute npm install para instalar nuestras dependencias locales enumeradas en package.json.
  3. Instale Ruby, instale Bundler con el gem install bundler , y finalmente ejecute bundle install . Esto instalará todas las dependencias de Ruby, como Jekyll y los complementos.

Fuente impresionante

  1. Descargue los archivos en https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Copie la carpeta font-awesome/scss en su carpeta / bootstrap
  3. Abra su SCSS /bootstrap/bootstrap.scss y escriba el siguiente código SCSS al final de este archivo:

    $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";

  4. Tenga en cuenta que también debe copiar el archivo de font-awesome/fonts de font-awesome/fonts a dist/fonts o cualquier otra carpeta pública configurada por $fa-font-path en el paso anterior

  5. Ejecute: npm run dist para recomstackr su código con Font-Awesome

Github Octicons

  1. Descargue los archivos en https://github.com/github/octicons/
  2. Copie la carpeta de octicons en su carpeta /bootstrap
  3. Abra su SCSS /bootstrap/bootstrap.scss y escriba el siguiente código SCSS al final de este archivo:

    $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";

  4. Tenga en cuenta que también debe copiar el archivo de font-awesome/fonts de font-awesome/fonts a dist/fonts o cualquier otra carpeta pública configurada por $fa-font-path en el paso anterior

  5. Ejecute: npm run dist para recomstackr 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 se limita a la versión 3 exclusiva. Entonces también puedes usarlos para Bootstrap 4.

  1. Copie los archivos de fonts desde: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Copie el archivo https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss en su carpeta bootstrap/scss
  3. 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";

  4. Ejecute: npm run dist para recomstackr su código con Glyphicons


Tenga en cuenta que Bootstrap 4 requiere el autoprefixer de CSS posterior para la comstackción. Cuando utilice un comstackdor Sass estático para comstackr su CSS, deberá ejecutar el prefijo automático posteriormente.

Puede encontrar más información sobre la mezcla con el Bootstrap 4 SCSS aquí .

También puede usar Bower para instalar las fonts de arriba. Usando 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 usted debe usar octicons/octicons/sprockets-octicons.scss .

Todo lo anterior comstackrá 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 fonts en CDN también incluyen los archivos de fuente (usando data-uri, posible no compatible con navegadores más antiguos). Por lo tanto, considere qué solución se adapta mejor a su situación dependiendo de, entre otros navegadores, de soporte.

Para Font Awesome pegue el siguiente código en la sección del HTML de su sitio:

  

Pruebe también con el generador Yeoman para anclar una aplicación Bootstrap 4 Web front-end para probar Bootstrap 4 con Font Awesome o Github Octicons.

Migrar de Glyphicons a Font Awesome es bastante fácil.

Incluya una referencia a Font Awesome (ya sea localmente, o use el CDN).

  

Luego ejecute una búsqueda y reemplace donde busca 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 debes corregirlos manualmente.

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 hacer esto en línea en less2css.org . Aquí lo hice por usted , guárdelo como glyphicons.css y lo incluye en sus archivos HTML.

  

También necesita las fonts 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.

Visión de conjunto:

Estoy usando bootstrap 4 sin glyphicons. Encontré un problema con la vista de árbol bootstrap que depende de los glyphicons. Estoy usando treeview como está, y estoy usando scss @extend para traducir los estilos de clase de icono a los estilos de clase de fonts geniales. ¡Creo que esto es bastante astuto (si me preguntas)!

Detalles:

Usé scss @extend para manejarlo por mí.

Anteriormente, decidí usar font-awesome sin una razón mejor que la que he usado en el pasado.

Cuando fui a probar bootstrap treeview, descubrí que faltaban los íconos, porque no tenía glyphicons instalados.

Decidí usar la función scss @extend para que las clases de glyphicon usen las clases de fonts geniales de la siguiente manera:

 .treeview { .glyphicon { @extend .fa; } .glyphicon-minus { @extend .fa-minus; } .glyphicon-plus { @extend .fa-plus; } } 

Si está utilizando Laravel 5.6, viene con Bootstrap 4. Todo lo que necesita es:

 npm install and npm install open-iconic --save 

En /resources/assets/sass/app.scss cambie la línea de importación de fonts de Google en la línea 2 a

 @import '~open-iconic/font/css/open-iconic-bootstrap'; 

Todo lo que necesitas hacer ahora es

 npm run watch 

e incluir

  

en la parte superior del archivo maestro de hoja y antes de cerrar la etiqueta de cuerpo. Obtendrás Bootstrap 4 e ícono.

El uso es

Consulte aquí los detalles del icono: Open Iconic: Recomendado por Bootstrap 4

Si está en otro proyecto que no sea Laravel, puede importar import @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; en tu archivo de estilo

Espero que esto ayude. Feliz tratando.

Si está buscando una manera de hacer una referencia cruzada de los glyphicons de Bootstrap 3 con los icons de Font Awesome, creé un pdf de referencia.

enter image description here

Puede obtenerlo aquí: https://bootstrapcreative.com/shop/bootstrap-quick-start/font-awesome-glyphicons-comparison-cheat-sheet/