Bootstrap 4 - Migration des glyphiques?

317

Nous avons un projet qui utilise intensivement les glyphicons. Bootstrap v4 supprime complètement la police glyphicon.

Existe-t-il un équivalent pour les icônes livrées avec Bootstrap V4?

Changelog

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

bootstrap-4 glyphicons Vincent Poirier
la source
15
Vous pouvez toujours utiliser des glyphicons , ils ne seront tout simplement plus livrés avec bootstrap. Si vous avez un problème de licence , vous pouvez vérifier les icônes impressionnantes de police .
Holt
1
Je crois que vous devez payer pour utiliser la police. J'ai édité la question pour clarifier.
Vincent Poirier
Il y a une licence gratuite où vous devez mettre un lien vers les glyphicons (voir la section GLYPHICON FREE dans mon lien précédent). Comme je l'ai dit dans mon commentaire précédent, il existe des alternatives telles que la police géniale qui sont open source et gratuites, mais savoir laquelle est la meilleure sera clairement basée sur l'opinion ...
Holt
Ce serait génial, mais le package gratuit ne propose pas la police, seulement les fichiers PNG. Apparemment, seul le package PRO inclut toutes les icônes en tant que police Web . Bien que vous soyez très utile (merci), la question concerne davantage les composants inclus dans Bootstrap, si vous pouvez confirmer qu'aucune icône d'aucun type n'est (ou ne sera) incluse dans la v4, vous pouvez générer une réponse.
Vincent Poirier
Si vous allez sur le lien fourni fontawesome.io, il vous sera demandé un paiement de 60 $ ou 99 $ si vous attendez trop, donc je pense que fontawesome n'est plus gratuit.
Gustavo Rodríguez

Réponses:

269

Vous pouvez utiliser à la fois Font Awesome et Github Octicons comme alternative gratuite aux Glyphicons.

Bootstrap 4 est également passé de Less à Sass, vous pouvez donc intégrer le Sass de la police (SCSS) dans votre processus de construction, pour créer un seul fichier CSS pour vos projets.

Voir également https://getbootstrap.com/docs/4.1/getting-started/build-tools/ pour savoir comment configurer vos outils:

  1. Téléchargez et installez Node, que nous utilisons pour gérer nos dépendances.
  2. Accédez au /bootstraprépertoire racine et exécutez npm installpour installer nos dépendances locales répertoriées dans package.json.
  3. Installez Ruby, installez Bundler avec gem install bundleret enfin exécutez bundle install. Cela installera toutes les dépendances Ruby, telles que Jekyll et les plugins.

Police Awesome

  1. Téléchargez les fichiers sur https://github.com/FortAwesome/Font-Awesome/tree/fa-4
  2. Copiez le font-awesome/scssdossier dans votre dossier / bootstrap

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

  4. Notez que vous devez également copier le fichier de police depuis ou font-awesome/fontsvers dist/fontstout autre dossier public défini par $fa-font-pathà l'étape précédente

  5. Exécuter: npm run distpour recompiler votre code avec Font-Awesome

Octicons Github

  1. Téléchargez les fichiers sur https://github.com/github/octicons/
  2. Copiez le octiconsdossier dans votre /bootstrapdossier

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

  4. Notez que vous devez également copier le fichier de police depuis ou font-awesome/fontsvers dist/fontstout autre dossier public défini par $fa-font-pathà l'étape précédente

  5. Exécuter: npm run distpour recompiler votre code avec Octicons

Glyphicons

Sur le site Web de Bootstrap, vous pouvez lire:

Comprend plus de 250 glyphes au format de police de l'ensemble Glyphicon Halflings. Les Glyphicons Halflings ne sont normalement pas disponibles gratuitement, mais leur créateur les a mis à disposition gratuitement pour Bootstrap. En guise de remerciement, nous vous demandons seulement d'inclure un lien vers Glyphicons chaque fois que possible.

Si je comprends bien, vous pouvez utiliser ces 250 glyphes sans frais limités pour Bootstrap mais non limités à la version 3 exclusive. Vous pouvez donc également les utiliser pour Bootstrap 4.

  1. Copiez les fichiers de polices à partir de: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
  2. Copiez le fichier https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss dans votre bootstrap/scssdossier
  3. 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";
  1. Exécuter: npm run distpour recompiler votre code avec des glyphiques

Notez que Bootstrap 4 nécessite le post- préfixeur CSS pour la compilation. Lorsque vous utilisez un compilateur Sass statique pour compiler votre CSS, vous devez ensuite exécuter l'Autoprefixer.

Vous pouvez en savoir plus sur le mixage avec le Bootstrap 4 SCSS ici .

Vous pouvez également utiliser Bower pour installer les polices ci-dessus. L'utilisation de Bower Font Awesome installe vos fichiers. bower_components/components-font-awesome/Notez également que Github Octicons définit le octicons/octicons/octicons-.scssfichier comme le fichier principal pendant que vous devez l'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. Alternativement, vous pouvez également charger la police Font-Awesome à partir de CDN, qui peut également être rapide dans de nombreuses situations. Les deux polices sur CDN incluent également les fichiers de polices (en utilisant des uri de données, éventuellement non pris en charge pour les anciens navigateurs). Considérez donc quelle solution convient le mieux à votre situation en fonction, entre autres, des navigateurs à prendre en charge.

Pour Font Awesome, collez le code suivant dans la <head>section 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 pour échafauder une application Web Bootstrap 4 frontale pour tester Bootstrap 4 avec Font Awesome ou Github Octicons.

Bass Jobsen
la source
4
Cela a été très approfondi et m'a vraiment aidé à clarifier les choses et à m'orienter dans la bonne direction de mon choix. Quelqu'un sait-il pourquoi BS4 a décidé de ne pas expédier avec le set Glyphicon Halflings? Juste pour affiner le paquet?
twknab
6
"Installer Ruby"?! Pourquoi devrais-je installer un framework de développement complet uniquement pour utiliser une police?! Et comment se fait-il que vous le mentionniez simplement comme note secondaire? C'est énorme car il change la sémantique, les processus de construction et les dépendances de tout votre projet juste pour obtenir une police! Il m'est inconcevable de savoir comment vous pouvez conseiller de le faire.
Jens Mander
261

La migration de Glyphicons 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">

Ensuite, lancez une recherche et remplacez l'endroit 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.

Fred
la source
27
Le moyen simple pour une intégration sans modifications. THX!
l.cotonea
1
Le principe KISS en action!
Craig
7
Tous les noms ne sont pas identiques. Voici les icônes de glyphicon de carte à font-awesome: gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9
Grigory Kislin
1
C'est beaucoup plus simple et direct que la réponse acceptée. Gloire!
luis.ap.uyen
6
fa fa-est amorti. Leur site Web dit maintenant fas fa-, et ce message: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

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, je l'ai fait pour vous , enregistrez-le sous glyphicons.css et incluez-le dans vos fichiers HTML.

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

Maintenant, vous pouvez continuer à utiliser Glyphicons avec Bootstrap 4 comme d'habitude.

Fred
la source
Fred Merci beaucoup.
user3728517
Fred, merci. Les icônes s'affichent dans les navigateurs Firefox et Chrome. Mais dans IE, les icônes s'affichent dans la version 11.0.9600.19377 mais pas dans la version 11.0.9600.19356. Comment puis-je faire les icônes à afficher dans IE version 11.0.9600.19356. J'ai également vérifié la console et il n'y a aucune erreur dans la version IE 11.0.9600.19356
Hemant
@Hemant, je ne sais pas. Quoi qu'il en soit, ce message est très ancien et remontait à l'époque où Glyphicons était à la version 4. Aujourd'hui, j'irais pour la version 5.
Fred
17

Si vous n'avez besoin que de classes de 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";}
Développer l'extrait

Роман Будённый
la source
A fonctionné comme un régal pour moi! Merci!
theshadow124
3

Pour les personnes qui recherchent des solutions à une ligne, vous ne pouvez importer que des glyphicons Bootstrap:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
R. Gurung
la source
Casse beaucoup d'autres choses
Bob Claerhout
J'aimerais en savoir plus. @BobClaerhout
R. Gurung
2 choses dont je me souviens: changement de police et datepicker bootstrap ( bootstrap-datepicker.readthedocs.io/en/latest ) perd son joli format
Bob Claerhout
2

Aperçu:

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 polices de styles de classe impressionnants. Je pense que c'est assez lisse (si vous me demandez)!

Détails:

J'ai utilisé scss @extend pour le gérer pour moi.

J'ai déjà décidé d'utiliser font-awesome pour aucune meilleure raison que je ne l'ai utilisé dans le passé.

Quand je suis allé essayer treeview bootstrap, j'ai trouvé que les icônes manquaient, car je n'avais pas de glyphicons installés.

J'ai décidé d'utiliser la fonction scss @extend, pour que les classes glyphicon utilisent les classes font-awesome comme suit:

.treeview {
  .glyphicon {
    @extend .fa;
  }
  .glyphicon-minus {
    @extend .fa-minus;
  }
  .glyphicon-plus {
    @extend .fa-plus;
  }
}
Sites Web sur mesure
la source
2

Si vous utilisez Laravel 5.6, il est fourni avec Bootstrap 4. Il vous suffit de:

npm install and npm install open-iconic --save

Lorsque vous /resources/assets/sass/app.scsschangez la ligne d'importation de polices Google sur la ligne 2 en

@import '~open-iconic/font/css/open-iconic-bootstrap';

Tout ce que vous devez faire maintenant, c'est

npm run watch

et inclure 

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

au-dessus du fichier de lame maître 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 les détails des icônes: Open Iconic: Recommandé par Bootstrap 4

Si sur un autre projet 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. Bon essai.

Ershad Ahamed
la source