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.