为什么glyphicon没有显示？ [英] Why glyphicon is not showing?

问题描述

我已经在我的角度项目中安装了bootstrap。在package.json中我有bootstrap：^ 3.3.7



在组件中。

从'@ angular / core'导入{Component，OnInit，Input}; 
 
 @Component（{
 selector：'zippy'，
 templateUrl：'。/ zyppy.component.html'，
 styleUrls：['。/ zyppy。 component.css'] 
}）
导出类ZippyComponent {
 @Input（'title'）title：string; 
 isExpanded：boolean; 
 
 toggle（）{
 this.isExpanded =！this.isExpanded; 
} 
 
} 

在html文件中

< div class = 活泼 > 
< 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 =isExpandedclass =zippy-body> 
< ng-content>< / ng-content> 
< / div> 
< / div> 

但是glyphicon没有显示？



我尝试了什么：



我试图将 styles.css 添加到

 styleUrls：['。/ zippy.component.css'，'。/ app / styles.css'] 

然后错误是：

编译失败。 
 
 ./src/app/zippy/zippy.component.ts 
找不到模块：错误：无法解析'C：\中的'./app/styles.css' 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 
解决方案
 
我必须添加行
 @import~bootstrap / dist / css / bootstrap.css; 
 
 
进入 style.css 项目文件。
 
 
我添加了@ import~bootstrap / dist / css / bootstrap.css;以及
 
但它仍然没有显示。
 
 
I have installed bootstrap in my angular project. In package.json I have "bootstrap":"^3.3.7"



In the component.

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;
  }

}


In html file

<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>


But the glyphicon is not showing?



What I have tried:



I tried to add the styles.css into 
styleUrls:['./zippy.component.css','./app/styles.css']




Then the error is:

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
解决方案
I have to add the line 
@import "~bootstrap/dist/css/bootstrap.css";


into style.css file of the project.

I have added the @import "~bootstrap/dist/css/bootstrap.css"; as well

but it still does not show.


                        
这篇关于为什么glyphicon没有显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！