CSS Bootstrap Glyphicons 不显示在 angular2 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37916272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Glyphicons not displaying in angular2
提问by Sahana ys
I am trying to use bootstrap glyphicons in my angular2 app. I have installed bootstrap using the command npm install bootstrap --save My code snippet is
我正在尝试在我的 angular2 应用程序中使用引导程序字形。我已经使用命令 npm install bootstrap --save 安装了 bootstrap 我的代码片段是
<button *ngIf="pos.name == uname" type="button" class="btn btn-default btn-sm delete" (click)="DeleteBulletin();">
<span class="glyphicon glyphicon-trash glyph"></span> Delete
</button>
I have included bootstrap in my styleUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']
我在 styleUrls-styleUrls 中包含了 bootstrap: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']
The glyphicon appears as shown-
字形如图所示 -
回答by Sebastian Viereck
Boostrap 4 does not supportGlyphicons anymore, you can use Font Awesomeinstead:
Boostrap 4不再支持Glyphicons，您可以使用Font Awesome代替：
npm install --save fortawesome/fontawesome-free
OR install the official Angular Fontawesome Package: https://github.com/FortAwesome/angular-fontawesome
或者安装官方的 Angular Fontawesome 包：https: //github.com/FortAwesome/angular-fontawesome
and add the css File to your .angular-cli.json
并将 css 文件添加到您的 .angular-cli.json
"apps": [
{
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
...
}
]
],
Replace CSS class with the Font Awesome classes:
用 Font Awesome 类替换 CSS 类：
<i class="navbar-toggler-icon fa fa-bars"> </i>
recompile app: ng serve
重新编译应用程序： ng serve
回答by supersonic
You have to import
你必须导入
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
to your index.html
到您的 index.html
回答by Shobhit
I installed bootstrap3 as npm install bootstrap@3 and it started working
我将 bootstrap3 安装为 npm install bootstrap@3 并开始工作
just need to add in angular-cli.json:-
只需要添加 angular-cli.json:-
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
回答by David
There is angular-cli-build.jsfile of root of the project if your application has been scaffold by angular-cli(using 'ng init' or 'ng new').
有角CLI-build.js如果您的应用程序已经被脚手架项目的根文件角CLI（使用“NG init”，或者“纳克新”）。
angular-cli-build.jsinstructs build of the project (using 'ng serve' or 'ng build') to place 3rd-party libraries into vendorfolder.
angular-cli-build.js指示项目的构建（使用“ng serve”或“ng build”）将第 3 方库放入供应商文件夹。
There is fontsfolder, in bootstrap distribution folder, holding glyphicons files. Those bootstrap files needs to be placed into vendor folder too.
在 bootstrap 分发文件夹中有fonts文件夹，里面有 glyphicons 文件。这些引导文件也需要放入供应商文件夹中。
angular-cli-build.js:
angular-cli-build.js：
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'@angular/**/*.+(js|js.map)',
'bootstrap/dist/css/bootstrap.min.css',
'bootstrap/dist/fonts/*'
]
});
};
For completeness, setup process for bootstrap was in those few steps below:
为了完整起见，bootstrap 的设置过程在以下几个步骤中：
Commnad line:
命令行：
npm install bootstrap --save
index.html:
索引.html：
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
Restart 'ng serve' or just rebuild with 'ng build'
重新启动“ng serve”或仅使用“ng build”重建
Here is result of page source:
这是页面源的结果：
回答by Pax Beach
If you are using Bootstrap 4, it doesn't include glyphicon in self release. So you coud use another icon package such as FontAwesome or installed the Glyphicons separately.
如果您使用的是 Bootstrap 4，它不会在自发布中包含 glyphicon。所以你可以使用另一个图标包，比如 FontAwesome 或单独安装 Glyphicons。
I am using FontAwesome and that dependencies in my cases:
我在我的情况下使用 FontAwesome 和依赖项：
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
"bootstrap": "4.0.0",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"popper.js": "^1.12.9",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.6.5",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
In HTML templates just place a code like that:
在 HTML 模板中，只需放置这样的代码：
<i class="fa fa-refresh" aria-hidden="true"></i>
回答by AliAwwad
if you include bootstrap files through styleUrls this will make an issue, I don't know why, but I found that the borwser looks at different location for glyphicons.
如果您通过 styleUrls 包含引导程序文件，这会产生问题，我不知道为什么，但我发现浏览器查看不同位置的字形。
@Component({
moduleId: module.id,
selector: 'app-projects',
templateUrl: 'projects.component.html',
styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
providers:[ProjectsService]
})
using above method for calling bootstrap stylesheet file causes following error "GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff"
使用上述方法调用引导样式表文件会导致以下错误“GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff”
what you can see from the error is that the browser is looking at localhost:4200/fonts/...where it should be localhost:4200/vendor/bootstrap/dist/fonts/...
您可以从错误中看到的是浏览器正在查看localhost:4200/fonts/...它应该在哪里localhost:4200/vendor/bootstrap/dist/fonts/...
anyway, a workaround is to make sure that you added the distfolder of bootstrap inside angular-cli-build.jsfile in vendorNpmFilesarray as 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'and remove bootstrap stylesheet from styleUrls.
无论如何，一种解决方法是确保您将distbootstrap的文件夹添加到数组中的angular-cli-build.js文件中vendorNpmFiles，'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'并从styleUrls.
then add to the index.html the following line:
然后将以下行添加到 index.html：
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
dont forget to ng serveor ng build
不要忘记ng serve或ng build
回答by Samudrala Ramu
Please run
请运行
npm install glyphicons --save
and than please import glyphicons in your component
然后请在您的组件中导入字形
import icons from 'glyphicons';
var icons = require('glyphicons');
console.info('This is' + icons.heart+ ' Glyphicons!')
You can check once in your browser console.
您可以在浏览器控制台中检查一次。
回答by Invest
The advice with FontAwesome is correct but only partially. If you just follow the FontAwesome instructions you will fail in an Angular project.
FontAwesome 的建议是正确的，但只是部分正确。如果您只是按照 FontAwesome 说明进行操作，您将在 Angular 项目中失败。
Instead check the hint on this page:
而是检查此页面上的提示：
Font Awesome now has an official Angular component that's available for all who want to easily use our icons in projects. If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.
Font Awesome 现在有一个官方的 Angular 组件，可供所有想要在项目中轻松使用我们的图标的人使用。如果您使用的是 Angular，则需要 angular-fontawesome 包或带有 CSS 的 Web 字体。
Okay this means in an Angular project you need to use the following package: Angular FontAwesome
好的，这意味着在 Angular 项目中，您需要使用以下包：Angular FontAwesome
The best page that I have found for me as I am using NPM was this page.
我在使用 NPM 时为我找到的最好的页面是这个页面。
So basically you need to:
所以基本上你需要：
- Install FontAwesome in NPM
- Import the module AngularFontAwesomeModule in your app.module.ts
- Add the CSS in the angular-cli.jsonfile
- 在 NPM 中安装 FontAwesome
- 在 app.module.ts 中导入模块AngularFontAwesomeModule
- 在angular-cli.json文件中添加 CSS
The details are all described in the link above.
详细信息都在上面的链接中描述。
- To finally add an icon you can add a power-off icon in the app.component.htmlfile:
- 要最终添加一个图标，您可以在app.component.html文件中添加一个关机图标：
Code:
代码：
<fa-icon [icon]="faPowerOff"></fa-icon>
- AND you need to add the code in the related app.component.tsfile:
- 并且您需要在相关的app.component.ts文件中添加代码：
Code:
代码：
import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
...
export class AppComponent implements OnInit {
faPowerOff = faPowerOff;
...
ONE IMPORTANT NOTE!
一个重要的注意事项！
Please realize you need to install the correct version of AngularFontawesome in NPM for your Angular version. Check this pagefor the compatibility table.
请意识到您需要在 NPM 中为您的 Angular 版本安装正确版本的 AngularFontawesome。检查此页面以获取兼容性表。
I used Angular 5 so I had to install it like this:
我使用了 Angular 5，所以我必须像这样安装它：
npm install @fortawesome/[email protected]
The entry will then be added to your package.jsonfile.
然后该条目将添加到您的package.json文件中。
回答by elranu
I did the same as @Sebastian Viereck . But i did
我和@Sebastian Viereck 一样。但我做到了
npm install --save-dev @fortawesome/fontawesome-free
and on the angular.json
并在 angular.json 上
"styles": ["node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
],
It looks that fontawesome has a new paid version
看起来 fontawesome 有一个新的付费版本
回答by Vibhor Dube
From https://www.w3schools.com/bootstrap4/bootstrap_icons.asp-
来自https://www.w3schools.com/bootstrap4/bootstrap_icons.asp-
Bootstrap 4 does not have its own icon library (Glyphicons from bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons. To use Font Awesome icons, follow these steps:
Bootstrap 4 没有自己的图标库（BS4 不支持 Bootstrap 3 中的 Glyphicons）。但是，有许多免费的图标库可供选择，例如 Font Awesome 和 Google Material Design Icons。要使用 Font Awesome 图标，请按照下列步骤操作：
Install Font-Awesome from the terminal in your project folder
从终端中的项目文件夹中安装 Font-Awesome
npm install --save font-awesome
and add the following line to your main stylesheet -
并将以下行添加到您的主样式表中 -
@import "~font-awesome/css/font-awesome.css";
You can now access all the icons available in the installed Font-Awesome library. Refer this link for the complete list of icons - Official Font Awesome Website
您现在可以访问已安装的 Font-Awesome 库中的所有可用图标。请参阅此链接以获取完整的图标列表 - Font Awesome 官方网站
