Anzeige Font Awesome - Angular 2

Question

Ich habe mich gefragt, ob es eine Möglichkeit gibt, alle "font awesome icons" in einem div tag anzuzeigen, ohne jedes einzelne zu schreiben. Es gibt ungefähr mehr als 200Icons, ich denke nicht, dass es eine gute Übung ist, jede einzelne Klasse so zu programmieren, dass sie die Icons anzeigt.

Ich versuchte ng-repeat verwenden, aber, aber ich kann das Ergebnis i eher will bekommen, als ich die Symbole all

für ein Beispiel schreiben habe, Die Art, wie ich auf herausgefunden, wie die jeweils Symbole angezeigt

ist

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

</div> 

Ich versuche dies zu erreichen, indem ich einfacheren Code schreibe.
Wie

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

Answer 1

Sie könnten die CSS-Datei analysieren und die Symbol-Namen extrahieren .. :)

@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