Roxy Roxy - 1 month ago 17
HTML Question

Glyphicon not showing up in browser

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

My Component class:

Heart.component.html contains :

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


i tried using "icon"as well

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

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 I am not sure if needed

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


Console shows no errors.

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

Thanks.

Answer

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.

Comments