Bootstrap 4: ¿Migración de Glyphicons?

Resuelto Vincent Poirier asked hace 9 años • 10 respuestas

Tenemos un proyecto que utiliza glifos de forma intensiva. Bootstrap v4 elimina por completo la fuente glifo.

¿Existe un equivalente para los íconos enviados con Bootstrap V4?

Registro de cambios

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

Vincent Poirier avatar Sep 16 '15 22:09 Vincent Poirier
Aceptado

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

Incluya una referencia a Font Awesome (ya sea localmente o use la 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 busca glyphicon glyphicon-y reemplácelo con fa fa-, y también cambie el elemento adjunto de <spana <i. La mayoría de los nombres de clases CSS son iguales. Sin embargo, algunos han cambiado, por lo que debes corregirlos manualmente.

Fred avatar Dec 22 '2016 10:12 Fred

Puede utilizar Font Awesome y Github Octicons como alternativa gratuita a 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 compilación para crear un único archivo CSS para sus proyectos.

Consulte también 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 /bootstrapy ejecútelo npm installpara instalar nuestras dependencias locales enumeradas en package.json.
  3. Instale Ruby, instale Bundler con gem install bundlery finalmente ejecute bundle install. Esto instalará todas las dependencias de Ruby, como Jekyll y complementos.

Fuente impresionante

  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 font-awesome/fontso dist/fontscualquier otra carpeta pública configurada $fa-font-pathen el paso anterior.

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

Ócticones de 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 font-awesome/fontso dist/fontscualquier otra carpeta pública configurada $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 para Bootstrap de forma gratuita. Como agradecimiento, sólo le pedimos que incluya un enlace a Glyphicons siempre que sea posible.

Según tengo entendido, puedes 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.scssbootstrap/scss en su carpeta
  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 tu código con Glyphicons

Tenga en cuenta que Bootstrap 4 requiere el Autoprefixer CSS posterior para compilar. Cuando utiliza un compilador Sass estático para compilar su CSS, debería ejecutar el Autoprefixer después.

Puede obtener más información sobre cómo mezclar con Bootstrap 4 SCSS aquí .

También puedes 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 lo establece octicons/octicons/octicons-.scsscomo el archivo principal mientras debe usar octicons/octicons/sprockets-octicons.scss.

Todo lo anterior compilará todo su código CSS en un solo archivo, que requiere solo una solicitud HTTP. Alternativamente, también puedes 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 uri de datos, es posible que no sean compatibles con navegadores más antiguos). Así que considere qué solución se adapta mejor a su situación dependiendo, entre otros, de los navegadores que admita.

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 crear una aplicación web Bootstrap 4 frontal para probar Bootstrap 4 con Font Awesome o Github Octicons.

Bass Jobsen avatar Nov 17 '2015 22:11 Bass Jobsen

El archivo glyphicons.less de Bootstrap 3 está disponible en GitHub. https://github.com/twbs/bootstrap/blob/v3-dev/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 lesscss.org/less-preview/ . Aquí lo he hecho por ti , guárdalo como glyphicons.css e inclúyelo en tus 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 el directorio /fonts/.

Ahora puedes seguir usando Glyphicons con Bootstrap 4 como de costumbre.

Fred avatar Aug 12 '2016 13:08 Fred

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

Роман Будённый avatar Nov 05 '2018 19:11 Роман Будённый

Ir a

https://github.com/Darkseal/bootstrap4-glyphicons

descargar e incluir en su código

<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">
YakovGdl35 avatar Sep 12 '2019 00:09 YakovGdl35