Я новичок в 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.

0
gio 3 Сен 2020 в 12:00

2 ответа

Лучший ответ

Похоже, вы установили bootstrap 4 (последнюю версию), и глификоны больше не поддерживаются в BS4.

Bootstrap 4 не имеет собственной библиотеки значков (глификоны из Bootstrap 3 не поддерживаются в BS4). Однако есть много бесплатных библиотек значков на выбор, например Font Awesome и Google Material Design Icons.

Лучше использовать иконки Font Awesome.

Перейдите по этой ссылке на W3schools.com, чтобы получить дополнительную информацию об этом.

0
ng-hobby 3 Сен 2020 в 10:47

По умолчанию глификоны не включены в bootstrap 4.

Хотя вы не найдете встроенной библиотеки значков в Bootstrap, наши отдельные проекты значков Bootstrap - это постоянно растущий набор SVG с открытым исходным кодом, который вы можете использовать. Хотя они предназначены в первую очередь для работы с нашими компонентами и документацией, вы можете использовать их в любом проекте.

Глификоны были доступны по умолчанию только в начальной загрузке 3, но были удалены в начальной загрузке 4. Рассмотрите возможность установки FontAwesome или любой другой библиотеки значков.

0
Owen Kelvin 3 Сен 2020 в 09:33