Bootstrap 4 - ¿Migración de glifos?

317

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?

Registro de cambios

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

bootstrap-4 glyphicons Vincent Poirier
fuente
15
Todavía puede usar glifos , simplemente ya no se enviarán con bootstrap. Si tiene un problema con la licencia , puede consultar los iconos de fuentes impresionantes .
Holt
1
Creo que tienes que pagar para usar la fuente. Edité la pregunta para aclarar.
Vincent Poirier
Hay una licencia gratuita en la que debe colocar un enlace a los glifos (consulte la sección SIN GLIFICOS en mi enlace anterior). Como dije en mi comentario anterior, existen alternativas como la fuente impresionante que son de código abierto y gratuitas, pero saber cuál es la mejor estará claramente basada en la opinión ...
Holt
Eso sería genial, pero el paquete gratuito no ofrece la fuente, solo los archivos PNG. Aparentemente, solo el paquete PRO incluye Todos los íconos como fuente web . Si bien es muy útil (gracias), la pregunta es más sobre los componentes incluidos en Bootstrap, si puede confirmar que no se incluyen (o se incluirán) íconos de ningún tipo en la v4, puede generar una respuesta.
Vincent Poirier
Si va al enlace proporcionado fontawesome.io, se le solicitará un pago de $ 60 o $ 99 si espera demasiado, por lo que creo que fontawesome ya no es gratis.
Gustavo Rodríguez

Respuestas:

269

Puede utilizar Font Awesome y Github Octicons como 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:

  1. Descargue e instale Node, que usamos para administrar nuestras dependencias.
  2. Navegue hasta el /bootstrapdirectorio raíz y ejecútelo npm installpara instalar nuestras dependencias locales enumeradas en package.json.
  3. Instala Ruby, instala Bundler con gem install bundlery finalmente ejecuta bundle install. Esto instalará todas las dependencias de Ruby, como Jekyll y complementos.

Font Awesome

  1. Descargue los archivos en https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Copie la font-awesome/scsscarpeta en su carpeta / bootstrap

  3. 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";

  4. Tenga en cuenta que también debe copiar el archivo de fuente desde o font-awesome/fontshacia dist/fontscualquier otra carpeta pública establecida $fa-font-pathen el paso anterior

  5. Ejecutar: npm run distpara recompilar su código con Font-Awesome

Octicones Github

  1. Descargue los archivos en https://github.com/github/octicons/
  2. Copie la octiconscarpeta en su /bootstrapcarpeta

  3. 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";

  4. Tenga en cuenta que también debe copiar el archivo de fuente desde o font-awesome/fontshacia dist/fontscualquier otra carpeta pública establecida $fa-font-pathen el paso anterior

  5. Ejecutar: 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.

  1. Copie los archivos de fuentes de: 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 bootstrap/scsscarpeta
  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";
  1. Ejecutar: 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 esté utilizando 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 aquí .

También puede usar Bower para instalar las fuentes anteriores. El uso de Bower Font Awesome instala sus archivos y bower_components/components-font-awesome/también tenga en cuenta que Github Octicons establece el octicons/octicons/octicons-.scssarchivo principal como el 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 fuentes (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 <head>sección 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.

Bass Jobsen
fuente
44
Esto fue muy completo y realmente me ayudó a aclarar las cosas y señalarme en la dirección correcta de mi elección. ¿Alguien sabe por qué BS4 decidió no enviar con el conjunto Glyphicon Halflings? ¿Solo para adelgazar el paquete?
twknab
66
"Instalar Ruby" ?! ¿Por qué instalaría un marco de desarrollo completo solo para usar una fuente? ¿Y por qué solo lo mencionas como nota al margen? ¡Es superhumano ya que cambia la semántica, los procesos de construcción y las dependencias de todo su proyecto solo para llegar a una fuente! Es inconcebible para mí cómo puedes aconsejar hacer eso.
Jens Mander
261

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.

Fred
fuente
27
La forma sencilla de integración sin cambios. ¡Gracias!
l.cotonea
1
El principio KISS en acción!
Craig
77
No todos los nombres son iguales. Este es el mapa de los iconos de glyphicon a font-awesome: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin
1
Esto es mucho más simple y directo que la respuesta aceptada. ¡Prestigio!
luis.ap.uyen
66
fa fa-es depreciado Su sitio web ahora dice fas fa-, y este mensaje:The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands.
James Wilkins
37

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="https://stackoverflow.com/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.

Fred
fuente
Fred muchas gracias.
user3728517
Fred, gracias. Los iconos se muestran en los navegadores Firefox y Chrome. Pero en IE, los iconos se muestran en la versión 11.0.9600.19377 pero no en la versión 11.0.9600.19356. ¿Cómo puedo hacer que los iconos se muestren en IE versión 11.0.9600.19356? También he comprobado la consola y no hay errores en la versión 11.0.9600.19356 de IE
Hemant
@Hemant, no lo sé. De cualquier manera, esta publicación es muy antigua y de cuando Glyphicons estaba en la versión 4. Hoy iría por la versión 5.
Fred
17

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";}
Expandir fragmento

Роман Будённый
fuente
¡Funcionó como un regalo para mí! ¡Gracias!
theshadow124
3

Para las personas que buscan soluciones de una sola línea, solo puede importar Bootstrap Glyphicons:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
R. Gurung
fuente
Rompe muchas otras cosas
Bob Claerhout
Me encantaría saber más @BobClaerhout
R. Gurung
Recuerdo dos cosas: el cambio de fuente y el selector de fecha bootstrap ( bootstrap-datepicker.readthedocs.io/en/latest ) pierde su formato agradable
Bob Claerhout
2

Visión general:

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 que la que he usado en el pasado.

Cuando fui a probar la vista de árbol de bootstrap, descubrí que faltaban los íconos porque no tenía glificones instalados.

Decidí usar la función scss @extend, para que las clases glyphicon usen las clases font-awesome así:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
Sitios web de Taylored
fuente
2

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

npm install and npm install open-iconic --save

Al /resources/assets/sass/app.scsscambiar la línea de importación de fuentes 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 

<link rel="stylesheet" href="{{asset('css/app.css')}}">

encima del archivo blade maestro 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 su archivo de estilo.

Espero que esto ayude. Feliz intento.

Ershad Ahamed
fuente