브라우저에 글리피콘이 표시되지 않습니다.

각도를 배우고 있습니다. 브라우저에 글리프콘 (심장)을 표시하고 싶습니다. 전체 코드 : https://github.com/tsingh38/Angular2는브라우저에 글리피콘이 표시되지 않습니다.

내 Component 클래스 :

Heart.component.html가 포함

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

은 나뿐만 아니라

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

내가 여기서 뭔가를 작성하고이를 표시되어야합니다.

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

콘솔에 오류를 보여줍니다

{ 
    "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" 
    } 
}

필요한 경우 나 확실하지 않다 Package.json

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

을 app.module.ts.

내 정보가 누락 될 경우 알려 주시기 바랍니다.

감사합니다. 아래 그림과 같이

출처

2016-10-20 Roxy

글리프콘이 포함 된 부트 스트랩 또는 라이브러리가 있습니까? – Sefa

당신은

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

경로는 로컬 경로, <head> 섹션에 index.html 페이지에 bootstrap.css를 추가해야합니다.

출처

2016-10-20 05:05:02 micronyks

도움 주셔서 감사합니다 :) – Roxy

브라우저에 글리피콘이 표시되지 않습니다.

답변

관련 문제