Glyphicon没有显示在浏览器中

Glyphicon没有显示在浏览器中

问题描述:

我正在学习有角度的知识,我想在浏览器上显示Glyphicon(心脏).完整代码: https://github.com/tsingh38/Angular2

I am learning angular and I want to show Glyphicon (Heart)on browser. full code: https://github.com/tsingh38/Angular2

我的组件类:

Heart.component.html 包含:

<span class="glyphicon glyphicon-heart"></span>

我也尝试使用"icon"

i tried using "icon"as well

Heart.component.ts

Heart.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heart',
  templateUrl: './heart.component.html',
  styleUrls: ['./heart.component.css']
})
export class HeartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.component.ts

import { Component ,NgModule} from '@angular/core';
import{CoursesComponent} from './courses/courses.component';
import{AuthorComponent} from './author/author.component';
import{StarComponent} from './star/star.component';
import{HeartComponent} from './heart/heart.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})

@NgModule({
  declarations:[CoursesComponent,AuthorComponent,HeartComponent]
})
export class AppComponent {
  title = 'app works!';
}

app.component.html

我在这里写了一些东西,应该显示出来.

i write something here and it should be displayed.

 <div>
 <span class="glyphicon glyphicon-star"></span>
 </div>
 <app-heart></app-heart> 
 <app-star></app-star>
 <courses></courses>
 <author></author>

app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';
import { AuthorComponent } from './author/author.component';
import { AutoGrowDirective } from './directives/auto-grow.directive';
import { StarComponent } from './star/star.component';
import { HeartComponent } from './heart/heart.component';

@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent,
    AuthorComponent,
    AuthorComponent,
    AuthorComponent,
    AutoGrowDirective,
    StarComponent,HeartComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Package.json 我不确定是否需要

{
  "name": "angular2-demo",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~2.0.0",
    "@angular/compiler": "~2.0.0",
    "@angular/core": "~2.0.0",
    "@angular/forms": "~2.0.0",
    "@angular/http": "~2.0.0",
    "@angular/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

控制台没有显示错误.

如果我身边缺少某些信息,请告诉我.

In case some information is missing from my side please let me know.

谢谢.

您需要在 index.html 中添加 bootstrap.css < head> 部分中的code> 页面,如下所示,

You need to add bootstrap.css in index.html page in <head> section as shown below,

<head>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 ...
</head>

路径也可以是您的本地路径.

path can be your local path also.