CODEWITHSUNDEEP
htmlangulartypescript
user2805507
user2805507

Reputation:

Displaying Font Awesome - Angular 2

I have been wondering if there is any way to display all "font awesome icons" in one div tag without writing each individual . There are about more than 200Icons available, i dont think its a good practice to hard code each individual class to display the icons.

I tried using ng-repeat but but i cant get the result i want rather than i have to write all the icons

for an example , The way i found out on how to display each icons is 

<div class="font-awesome">
    <i class="fa fa-html5"></i>
    <i class="fa fa-address-book"></i>
..
..
..so goes the code
..

</div>

I am trying to achieve this by writing simpler code .
Like

<div class="main">
<!-- Display all icons in one or a few  line codes --> 
</div>

Upvotes: 2

Views: 878

Answers (1)

slaesh
slaesh

Reputation: 16917

You could parse the CSS-file and extract the symbol-names.. :)

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div class="font-awesome">
        <i *ngFor="let sn of symbolNames" class="fa fa-3x {{ sn }}"></i>
      </div>

    </div>
  `,
})
export class App {
  name:string;

  symbolNames = [];

  constructor(private _http: Http) {
    this.name = 'Angular2'
  }

  ngOnInit() {

    this._http
      .get('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
      .map(response => response.text())
      .subscribe(css => {
        const symbols = css.split('.fa-glass:before')[1]; // 'fa-glass' is the first symbol in that CSS-file ! :)
        symbols = '.fa-glass:before' + symbols;

        const tmp = [];
        symbols
          .split('.')
          .filter(x => x.indexOf('fa-') === 0)
          .forEach(x => {
            tmp.push(x.split(':')[0]);
        });

        this.symbolNames = tmp;
      });
  }
}

live-demo: https://plnkr.co/edit/udm8QvrrFqqQPyH2DznH?p=preview

Upvotes: 0

Related Questions