bootstrap-4 - font - glyphicon glyphicon

Bootstrap 4-¿Migración de glifos?

Question

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?

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

Answer 1

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.

Answer 2

Ir

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

descarga e incluye en tu código

<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">

Answer 3

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.

Answer 4

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;
  }
}

Answer 5

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:

1. Descargue e instale Node, que usamos para administrar nuestras dependencias.
2. Navegue al directorio raíz /bootstrap y ejecute npm install para instalar nuestras dependencias locales que figuran en package.json.
3. Instale Ruby, instale Bundler con gem install bundler y finalmente ejecute 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 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 establecida por $fa-font-path en el paso anterior

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

Octicones Github

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 establecida por $fa-font-path en el paso anterior

5. Ejecute: npm run dist para 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 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 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.

Answer 6

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.

Answer 7

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

Answer 8

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