Bootstrap 4 - Migration de glyphicons?
Nous avons un projet qui utilise intensément les glyphicons. Bootstrap v4 supprime complètement la police glyphicon.
Existe-t-il un équivalent pour les icônes livrées avec Bootstrap V4?
Vous pouvez utiliser à la fois Font Awesome et Github Octicons comme alternative gratuite aux glyphiques.
Bootstrap 4 est également passé de Less à Sass. Vous pouvez donc intégrer le Sass (SCSS) de la police dans votre processus de création, afin de créer un fichier CSS unique pour vos projets.
Voir aussi https://getbootstrap.com/docs/4.1/getting-started/build-tools/ pour savoir comment configurer votre outillage:
- Téléchargez et installez Node, que nous utilisons pour gérer nos dépendances.
- Accédez au répertoire racine
/bootstrapet exécuteznpm installpour installer nos dépendances locales répertoriées dans package.json. - Installez Ruby, installez Bundler avec
gem install bundleret exécutez finalementbundle install. Cela installera toutes les dépendances Ruby, telles que Jekyll et les plugins.
Police Awesome
- Téléchargez les fichiers sur https://github.com/FortAwesome/Font-Awesome/tree/fa-4
- Copiez le dossier
font-awesome/scssdans votre dossier/bootstrap. Ouvrez votre SCSS
/bootstrap/bootstrap.scsset notez le code SCSS suivant à la fin de ce fichier:$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";Notez que vous devez également copier le fichier de police de
font-awesome/fontsversdist/fontsou tout autre dossier public défini par$fa-font-pathà l'étape précédente.- Exécuter:
npm run distpour recompiler votre code avec Font-Awesome
Github Octicons
- Téléchargez les fichiers sur https://github.com/github/octicons/
- Copiez le dossier
octiconsdans votre dossier/bootstrap Ouvrez votre SCSS
/bootstrap/bootstrap.scsset notez le code SCSS suivant à la fin de ce fichier:$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";Notez que vous devez également copier le fichier de police de
font-awesome/fontsversdist/fontsou tout autre dossier public défini par$fa-font-pathà l'étape précédente.- Exécuter:
npm run distpour recompiler votre code avec des octicons
Glyphicons
Sur le site Web Bootstrap, vous pouvez lire:
Inclut plus de 250 glyphes en format de police du jeu Glyphicon Halflings. Les glyphiques Les halfelins ne sont normalement pas disponibles gratuitement, mais leur créateur les a rendus disponibles pour Bootstrap sans frais. En guise de remerciement, nous vous demandons seulement d'inclure un lien vers Glyphicons dans la mesure du possible.
Si j'ai bien compris, vous pouvez utiliser ces 250 glyphes sans frais limités pour Bootstrap mais non limités à la version 3 exclusive. Vous pouvez donc les utiliser également pour Bootstrap 4.
- Copiez les fichiers de polices à partir de: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
- Copiez le fichier https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss dans votre dossier
bootstrap/scss. - Ouvrez votre scss /bootstrap/bootstrap.scss et notez le code SCSS suivant à la fin de ce fichier:
$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
- Exécuter:
npm run distpour recompiler votre code avec Glyphicons
Notez que Bootstrap 4 nécessite la publication CSS Autoprefixer pour la compilation. Lorsque vous utilisez un compilateur Sass statique pour compiler votre CSS, vous devez exécuter le préfixe automatique ultérieurement.
Vous pouvez en savoir plus sur le mixage avec le Bootstrap 4 SCSS dans ici .
Vous pouvez également utiliser Bower pour installer les polices ci-dessus. Utilisation de Bower Font Awesome installe vos fichiers dans bower_components/components-font-awesome/ et vous remarquerez également que Github Octicons définit le octicons/octicons/octicons-.scss comme fichier principal, alors que vous devez utiliser octicons/octicons/sprockets-octicons.scss.
Tout ce qui précède compilera tout votre code CSS, y compris dans un seul fichier, qui ne nécessite qu'une seule requête HTTP. Vous pouvez également charger la police Font-Awesome à partir de CDN, ce qui peut être rapide dans de nombreuses situations. Les deux polices sur CDN incluent également les fichiers de polices (utilisation de data-uri, possible non pris en charge par les anciens navigateurs). Pensez donc à la solution qui convient le mieux à votre situation en fonction, entre autres, des navigateurs à prendre en charge.
Pour Font Awesome, collez le code suivant dans la section <head> du code HTML de votre site:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Essayez également le générateur Yeoman échafaude une application Web Bootstrap 4 frontale pour tester Bootstrap 4 avec Font Awesome ou Github Octicons.
Migrer des glyphiques vers Font Awesome est assez facile.
Incluez une référence à Font Awesome (soit localement, soit utilisez le CDN).
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Puis lancez une recherche et remplacez où vous recherchez glyphicon glyphicon- et remplacez-le par fa fa-. La plupart des noms de classe CSS sont les mêmes. Certains ont cependant changé, vous devez donc les corriger manuellement.
Le fichier glyphicons.less de Bootstrap 3 est disponible sur GitHub. https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less
Il a besoin de ces variables:
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
Ensuite, vous pouvez convertir le fichier .less en un fichier .css que vous pouvez utiliser directement. Vous pouvez le faire en ligne sur lesscss.org/less-preview/ . Ici, j'ai l'a fait pour vous , enregistrez-le sous glyphicons.css et incluez-le dans vos fichiers HTML.
<link href="/Content/glyphicons.css" rel="stylesheet" />
Vous avez également besoin des polices Glyphicon qui se trouvent dans le package Bootstrap 3, placez-les dans un répertoire/fonts /.
Vous pouvez maintenant continuer à utiliser les glyphiques avec Bootstrap 4 comme d'habitude.
Si vous n'avez besoin que de classes glyphicon 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";}Vue d'ensemble:
J'utilise bootstrap 4 sans glyphicons. J'ai trouvé un problème avec l'arborescence bootstrap _ qui dépend des glyphicons. J'utilise treeview tel quel et j'utilise scss @extend pour traduire les styles de classe d'icônes en styles de police géniaux. Je pense que c'est assez lisse (si vous me demandez)!
Détails:
J'ai utilisé scss @extend pour le gérer pour moi.
Auparavant, j'avais décidé d'utiliser font-awesome sans meilleure raison que celle que j'avais utilisée dans le passé.
Quand j’ai essayé d’essayer le bootstrap _, je me suis rendu compte que les icônes étaient manquantes, car je n’avais pas de glyphicons installés.
J'ai décidé d'utiliser la fonctionnalité scss @extend pour que les classes glyphicon utilisent les classes font-awesome de la manière suivante:
.treeview {
.glyphicon {
@extend .fa;
}
.glyphicon-minus {
@extend .fa-minus;
}
.glyphicon-plus {
@extend .fa-plus;
}
}
Pour ceux qui recherchent des solutions one-liner, vous pouvez importer uniquement Bootstrap Glyphicons:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Si vous utilisez Laravel 5.6, il est livré avec Bootstrap 4. Tout ce dont vous avez besoin est:
npm install and npm install open-iconic --save
À /resources/assets/sass/app.scss changez la ligne d’importation de police Google sur la ligne 2 en
@import '~open-iconic/font/css/open-iconic-bootstrap';
Tout ce que vous devez faire maintenant est
npm run watch
et inclure
<link rel="stylesheet" href="{{asset('css/app.css')}}">
au-dessus du fichier de lame principale et <script src="{{asset('js/app.js')}}"></script> avant de fermer la balise body. Vous obtiendrez Bootstrap 4 et l'icône.
L'utilisation est <span class="oi oi-cog"></span>
Reportez-vous ici pour plus de détails sur les icônes: Ouvrir iconique: recommandé par Bootstrap 4
Si vous travaillez sur un projet autre que Laravel, vous pouvez simplement importer @import 'node_modules/open-iconic/font/css/open-iconic-bootstrap-min.css'; dans votre fichier de style.
J'espère que cela t'aides. Heureux d'essayer.