Bootstrap 4 - Migrazione di glyphicon?

Question

Abbiamo un progetto che usa intensivamente i glyphicon. Bootstrap v4 elimina del tutto il carattere glyphicon.

Esiste un equivalente per icone fornite con Bootstrap V4?

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

Answer 1

è possibile utilizzare sia Font Awesome e Github Octicons come un'alternativa libera per Glyphicons.

Bootstrap 4 passa da Meno a Sass, quindi è possibile inserire il font Sass (SCSS) nel processo di creazione, per creare un singolo file CSS per i propri progetti.

vedere anche http://v4-alpha.getbootstrap.com/getting-started/build-tools/ per scoprire come impostare il vostro utensili:

1. Scaricare e installare Node, che usiamo per gestire le nostre dipendenze.
2. Installare gli strumenti della riga di comando Grunt, grunt-cli, con npm install -g grunt-cli.
3. Passare alla directory root/bootstrap ed eseguire npm install per installare le nostre dipendenze locali elencate in package.json.
4. Installa Ruby, installa Bundler con gem install bundler e infine esegue bundle. Questo installerà tutte le dipendenze Ruby, 5. come Jekyll e Sass linter.

Font Impressionante

1. scaricare i file a https://github.com/FortAwesome/Font-Awesome
2. Copiare la cartella font-awesome/scss nella cartella/bootstrap
3. Aprire il /bootstrap/bootstrap.scss SCSS e scrivere il seguente Codice SCSS alla fine di questo file: $fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";
4. Si noti che si dispone anche di per copiare il file di font font-awesome/fonts-dist/fonts o qualsiasi altra cartella pubblica impostato dal $fa-font-path nel passaggio precedente
5. Run: grunt dist di ricompilare il codice con Font-Impressionante

Github Octicons

1. Scarica i file allo https://github.com/github/octicons/
2. Copia la cartella octicons nella cartella/bootstrap
3. Apri il tuo scss/bootstrap/bootstrap.SCSS e scrivere il seguente codice SCSS alla fine di questo file: $fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";
4. noti che si hanno anche per copiare il file di font font-awesome/fonts-dist/fonts o qualsiasi altra cartella pubblica impostato dal $fa-font-path nel passaggio precedente
5. Run : grunt dist di ricompilare il codice con Octicons

noti che Bootstrap 4 richiede l'autoprefixer posta CSS per la compilazione. Quando si utilizza un compilatore statico Sass per compilare il CSS, è necessario eseguire in seguito il prefisso-autoprefixer.

Puoi anche utilizzare Bower per installare i caratteri sopra. Usando Bower Font Awesome installa i tuoi file in bower_components/components-font-awesome/ notando anche che Github Octicons imposta octicons/octicons/octicons-.scss come file principale mentre dovresti usare octicons/octicons/sprockets-octicons.scss.

Tutto quanto sopra compila tutto il codice CSS incluso in un singolo file, che richiede solo una richiesta http. In alternativa puoi anche caricare il font Font-Awesome di CDN, che può essere anche veloce in molte situazioni. Entrambi i tipi di carattere su CDN includono anche i file dei caratteri (utilizzando i dati uri, possibile non supportato per i browser più vecchi). Quindi considera quale soluzione si adatta meglio alla tua situazione a seconda di altri browser da supportare.

Per carattere impressionante incollare il seguente codice nella sezione '' di codice HTML del tuo sito:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 

cercano anche Yeoman generator to scaffold out a front-end Bootstrap 4 Web app per testare Bootstrap 4 con font impressionanti o Github Octicons.

Glyphicons

Sul sito Bootstrap si può leggere:

comprende oltre 250 glifi in formato di font dal set Glyphicon Mezzuomini. Glyphicons Gli halfling non sono normalmente disponibili gratuitamente, ma il loro creatore li ha resi disponibili per Bootstrap gratuitamente. Come ringraziamento, ti chiediamo solo di includere un link a Glyphicons quando possibile.

Come ho capito, è possibile utilizzare questi 250 glifi senza restrizioni per Bootstrap ma non limitati alla versione 3 esclusiva. Quindi puoi usarli anche per Bootstrap 4.

1. Copiare i file di font da: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
2. Copiare il file https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss nel tuo bootstrap/scss cartella

3. Aprire il /bootstrap/bootstrap.scss SCSS e scrivere il seguente codice SCSS alla fine di questo file :

   $bootstrap-sass-asset-helper: false; $icon-font-name: 'glyphicons-halflings-regular'; $icon-font-svg-id: 'glyphicons_halflingsregular'; $icon-font-path: '../fonts/'; @import "glyphicons";

4. Run: grunt dist di ricompilare il codice con Glyphicons

Answer 2

Il file glyphicons.less di Bootstrap 3 è disponibile su GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less

ha bisogno di queste variabili:

@icon-font-path:   "../fonts/"; 
@icon-font-name:   "glyphicons-halflings-regular"; 
@icon-font-svg-id:  "glyphicons_halflingsregular"; 

Quindi è possibile convertire il file .less in un file CSS che può essere utilizzato direttamente. Puoi farlo online su less2css.org. Qui ho done it for you, salvarlo come glyphicons.css e includerlo nei tuoi file HTML.

<link href="/Content/glyphicons.css" rel="stylesheet" /> 

è necessario anche i font Glyphicon che è nel pacchetto Bootstrap 3, metterli in un/fonts/directory.

Ora puoi continuare a utilizzare Glyphicons con Bootstrap 4 come al solito.

Answer 3

La migrazione da Glyphicons a Font Awesome è abbastanza semplice.

Includere un riferimento a Font Awesome (localmente o utilizzare la CDN).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

Quindi eseguite una ricerca e sostituzione in cui si cerca "glyphicon glyphicon-" e sostituirlo con "Fa della Fa". La maggior parte dei nomi delle classi CSS è la stessa. Alcuni sono stati modificati, quindi è necessario correggerli manualmente.

Answer 4

Panoramica:

Sto utilizzando bootstrap 4 senza glyphicons. Ho trovato un problema con treeview bootstrap che dipende dai glyphicons. Sto usando treeview così com'è, e sto usando scss @extend per tradurre gli stili delle classi di icone per creare fantastici stili di classe. Penso che questo sia abbastanza lucido (se me lo chiedi)!

Dettagli:

ho usato SCSS @extend di gestire la cosa per me.

Ho deciso in precedenza di usare font-awesome senza alcun motivo migliore di quello che ho usato in passato.

Quando sono andato a provare treeview bootstrap, ho trovato che mancavano le icone, perché non avevo i glyphicon installati.

ho deciso di utilizzare la funzione di @extend SCSS, di avere le classi glyphicon utilizzare le classi ai font impressionante come così:

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

Answer 5

Se siete alla ricerca di un modo per riferimento incrociato Bootstrap 3 glyphicons con Font Icone fantastiche Ho creato un pdf di riferimento.

È possibile ottenere qui: https://bootstrapcreative.com/shop/bootstrap-migration-guide/