Bootstrap 4 Glyphicons ne s'affiche pas sur Angulaire 4 projet
Je suis en train de travailler sur un Angulaires 4 Projet à l'aide de Bootstrap 4 avec Sass, et je veux utiliser les glyphicons mais lorsque j'utilise le code suivant:
<button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span>Like</button>
Par exemple, lors d'un bouton "j'aime", l'icône n'apparaît pas.
J'ai configuré le projet pour compiler le SCSS les feuilles de style avec la ng-serve
commande, mon angular-cli.json
ressemble à ceci:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "front-end-informatorio"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/bootstrap/scss/main.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
J'ai essayé de relier ce dans mon index.html
:
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/>
Il a fait les icônes de travail, mais aussi changé le style de l'ensemble de mon projet.
Comment puis-je l'atteindre sans se chevauchent les styles?
Vous devez vous connecter pour publier un commentaire.
Bootstrap 4 chuté Glyphicons de soutien. (voir: https://getbootstrap.com/docs/4.0/migration/#components)
Cela signifie que vous aurez besoin d'utiliser une autre icône de la police, comme Police Impressionnant.
De démarrage rapide pour la Police Génial
<head>
Exemple:
HTML:
Angulaire de la Police Génial composant
La Police Impressionnant de l'équipe est de travailler sur une Angulaire de la Police Génial composant. Elle est maintenant en pré-version, mais vous pouvez le trouver ici.