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?
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?
Réponses:
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:
/bootstrap
répertoire racine et exécutez npm install
pour installer nos dépendances locales répertoriées dans package.json.gem install bundler
et enfin exécutez bundle install
. Cela installera toutes les dépendances Ruby, telles que Jekyll et les plugins.Police Awesome
font-awesome/scss
dossier dans votre dossier / bootstrapOuvrez votre SCSS /bootstrap/bootstrap.scss
et 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 depuis ou font-awesome/fonts
vers dist/fonts
tout autre dossier public défini par $fa-font-path
à l'étape précédente
npm run dist
pour recompiler votre code avec Font-AwesomeOcticons Github
octicons
dossier dans votre /bootstrap
dossierOuvrez votre SCSS /bootstrap/bootstrap.scss
et 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 depuis ou font-awesome/fonts
vers dist/fonts
tout autre dossier public défini par $fa-font-path
à l'étape précédente
npm run dist
pour recompiler votre code avec OcticonsGlyphicons
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.
bootstrap/scss
dossier$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";
npm run dist
pour recompiler votre code avec des glyphiquesNotez 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-.scss
fichier 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.
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.
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.
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.
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";}
Il n'est pas encore livré avec bootstrap 4, mais maintenant l'équipe Bootstrap développe sa bibliothèque d'icônes.
Pour les personnes qui recherchent des solutions à une ligne, vous ne pouvez importer que des glyphicons Bootstrap:
<link href="https://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
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;
}
}
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.scss
changez 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.
Aller à
https://github.com/Darkseal/bootstrap4-glyphicons
télécharger et inclure dans votre code
<link href="bootstrap4-glyphicons/css/bootstrap-glyphicons.css" rel="stylesheet">