Member 12658724 Ответов: 4

Почему glyphicon не показывает?


Я установил bootstrap в свой угловой проект. В package.json у меня есть "bootstrap":"^3.3.7"

В компоненте.
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'zippy',
  templateUrl: './zippy.component.html',
  styleUrls: ['./zippy.component.css']
})
export class ZippyComponent  {
  @Input('title') title: string;
  isExpanded: boolean;

  toggle() { 
    this.isExpanded = !this.isExpanded;
  }

}

В html файле
<div class="zippy">
  <div 
    class="zippy-heading"
    [class.expanded]="isExpanded"
    (click)="toggle()"
    >
    {{ title }}
    <span class="glyphicon"
      [ngClass]="{
        'glyphicon-chevron-up': isExpanded,
        'glyphicon-chevron-down': !isExpanded
      }"
    ></span>
  </div>
  <div *ngIf="isExpanded" class="zippy-body">
    <ng-content></ng-content>
  </div>
</div>

Но глификон не показывается?

Что я уже пробовал:

Я попытался добавить: styles.css в
styleUrls:['./zippy.component.css','./app/styles.css']


Тогда ошибка заключается в следующем:
Failed to compile.

./src/app/zippy/zippy.component.ts
Module not found: Error: Can't resolve './app/styles.css' in 'C:\Demo\Angular\tweet\src\app\zippy'
 @ ./src/app/zippy/zippy.component.ts 27:51-78
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Kornfeld Eliyahu Peter

Вы должны отладить свою страницу в браузере, вы найдете ответ там...

Karthik_Mahalingam

проверьте окно консоли на вкладке Источники

4 Ответов

Рейтинг:
1

Member 12796256

загрузочный": "4.1.3"

Если я не ошибаюсь
glyphicon не поддерживается после bootstrap 4.
bootstrap использует другие пакеты для отображения значка. вы можете найти ссылки на его веб-сайте
если вы хотите использовать глификон. установите bootstrap 3.
или добавить внутри index.html в


Richard Deeming

ОП четко заявил, что они используют Bootstrap 3.3.7, и абсолютно нигде не упоминал о 4.1.3.

Рейтинг:
0

Member 12658724

Я должен добавить строку

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

в style.css файл проекта.


Рейтинг:
0

Member 13900791

Я также добавил @import "~bootstrap/dist/css/bootstrap.css";
но этого все равно не видно.


Рейтинг:
0

Member 14827694

Решение 4-правильное!
bootstrap": "4.1.3" не поддерживает glyphicon.
пожалуйста, следуйте приведенным выше командам, чтобы удалить текущую версию bootstrap:

>> npm uninstall bootstrap

&ГТ;&ГТ; НПМ установить bootstrap@3.3.7

и это сработало для меня!

Спасибо за решение 4!!


CHill60

Если вы хотите прокомментировать решение, то используйте команду "есть вопрос или комментарий?" ссылка рядом с ним. И не имеет значения, что 4.1.3 не поддерживает glyphicon, когда OP использует 3.3.7!