Question

我在Angular中还很陌生，我正在尝试在项目中使用Bootstrap。我已经使用npm安装了引导程序，如下所示：

cmd npm install bootstrap --save

并将根导入到我的style.css中：

@import '~bootstrap/dist/css/bootstrap.css';

接下来，我尝试使用带有以下代码的引导程序中可用的图标：

star.component.html

<h2> Trying to use bootstrap</h2>
<span class="glyphicon" [class.glyphicon-star]="isFavorite" [class.glyphicon-star-empty]="!isFavorite" (click)="onClick()">
</span>

这是我的component.ts文件：

star.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-star',
    templateUrl: './star.component.html',
    styleUrls: ['./star.component.css']
})
export class StarComponent implements OnInit {
    isFavorite: boolean;



    onClick() {
        this.isFavorite = !this.isFavorite;
    }
}

此外，所有内容都以这种方式导入app.module中：

import { StarComponent } from './star/star.component';
@NgModule({
    declarations: [
        ....
        StarComponent,
    ],
    ...
    bootstrap: [AppComponent]
})
export class AppModule {}

我没有错误，但是看不到star。（我也尝试过导入引导程序：[ AppComponent, StarComponent ]，但它不起作用。

在我的package.json中，可以看到我正在使用引导程序版本4。

Answer 1

似乎您安装了bootstrap 4（最新版本），并且BS4中不再支持字形图标。

Bootstrap 4没有自己的图标库（BS4不支持Bootstrap 3的Glyphicons）。但是，有很多免费的图标库可供选择，例如Font Awesome和Google Material Design图标。

最好使用“真棒字体”图标。

在W3schools.com上访问此链接以获取有关此信息的更多信息。

Answer 2

引导程序4中默认不包含Glyphicons。

虽然您在Bootstrap中找不到内置的图标库，但我们单独的Bootstrap Icons项目却是您可以使用的越来越多的开源SVG。尽管它们的首要目的是与我们的组件和文档一起使用，但是您可以在任何项目中使用它们。

Glyphicons仅在引导程序3中默认可用，但在引导程序4中已删除。请考虑安装FontAwesome或任何其他图标库

角度和引导程序

2 个答案: