我想在我的Angular2应用程序中使用Bootstrap图标。我已经使用命令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>
我已将Bootstrap包含在我的styleUrls中 - styleUrls：['node_modules/bootstrap/dist/css/bootstrap.min.css'，'app/home.component.css']
图标显示如下 -
Bootstrap 4 不再支持 Glyphicons，你可以使用Font Awesome代替：
npm install --save fortawesome/fontawesome-free
并将CSS文件添加到您的.angular-cli.json文件中
"apps": [
{
....
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
...
}
]
],
用 Font Awesome 的类替换 CSS 类：
<i class="navbar-toggler-icon fa fa-bars"> </i>
重新编译应用程序：ng serve
更新：自Font-Awesome 5和Angular 5以来，官方提供了一个名为angular-fontawesome的包：
https://github.com/FortAwesome/angular-fontawesome#installation
您需要在index.html文件中导入以下代码：
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
我安装了Bootstrap3，使用npm install bootstrap@3命令，它已经可以正常工作了。
只需要在angular-cli.json文件中添加：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"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"
}
<i class="fa fa-refresh" aria-hidden="true"></i>
如果您的应用程序是通过angular-cli（使用'ng init'或'ng new'）搭建的，那么在项目根目录下会有一个名为angular-cli-build.js的文件。
angular-cli-build.js指导项目的构建（使用'ng serve'或'ng build'），将第三方库放置到vendor文件夹中。
在bootstrap分发文件夹中有一个fonts文件夹，保存着glyphicons文件。这些bootstrap文件也需要被放置到vendor文件夹中。
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/*'
]
});
};
npm install bootstrap --save
index.html:
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
重新启动'ng serve'或者使用'ng build'进行重建
这是页面源代码的结果：
如果你使用的是Bootstrap 4，那么不再支持Glyphicon图标，你应该尝试使用旧版本。
@Component({
moduleId: module.id,
selector: 'app-projects',
templateUrl: 'projects.component.html',
styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
providers:[ProjectsService]
})
<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
ng serve 或 ng build 命令。关于FontAwesome的建议是正确的，但只是部分正确。如果你只是按照FontAwesome的说明来做，在Angular项目中会失败。
相反，请查看此页面上的提示：
Font Awesome现在有一个官方的Angular组件，适用于所有想要在项目中轻松使用我们的图标的人。如果您正在使用Angular，则需要angular-fontawesome包或带有CSS的Web字体。
好的，这意味着在Angular项目中，您需要使用以下软件包：Angular FontAwesome
对我来说，我发现最好的页面是此页面。
所以基本上你需要：
详细信息都在上面的链接中描述。
代码：
<fa-icon [icon]="faPowerOff"></fa-icon>
代码：
import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
...
export class AppComponent implements OnInit {
faPowerOff = faPowerOff;
...
一个重要的提示！
请注意，您需要在NPM中安装与您的Angular版本相对应的正确版本的AngularFontawesome。请查看this page以获取兼容性表。
我使用的是Angular 5，所以我必须像这样安装它：
npm install @fortawesome/angular-fontawesome@0.1.1
来自 https://www.w3schools.com/bootstrap4/bootstrap_icons.asp -
Bootstrap 4 没有自己的图标库（来自 Bootstrap 3 的 Glyphicons 在 BS4 中不被支持）。然而，有许多免费的图标库可供选择，如 Font Awesome 和 Google Material Design Icons。要使用 Font Awesome 图标，请按照以下步骤操作：
在项目文件夹中通过终端安装 Font-Awesome。
npm install --save font-awesome
并将以下行添加到您的主样式表中 -
@import "~font-awesome/css/font-awesome.css";
现在您可以访问已安装的 Font-Awesome 库中提供的所有图标。请参考此链接获取完整的图标列表 - 官方 Font Awesome 网站
npm install glyphicons --save
然后请在您的组件中导入glyphicons
import icons from 'glyphicons';
var icons = require('glyphicons');
console.info('This is' + icons.heart+ ' Glyphicons!')
你可以在浏览器控制台中检查一次。