顯示字體真棒 - 角2

我一直想知道是否有任何方法來顯示所有「字體真棒圖標」在一個div標籤沒有寫每個人。大約有200多個圖標可用，我不認爲這是一個很好的做法，以硬編碼每個單獨的類來顯示圖標。顯示字體真棒 - 角2

我試圖用NG-重複，但，但我不能得到我想要的，而對於結果，我不得不寫所有的圖標

爲例，我發現瞭如何顯示每個圖標的方式是

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

</div>

我試圖通過編寫更簡單的代碼來實現此目的。
像

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

來源

2016-12-06 FaridAvesko

我不認爲這是可能的。 –

我的答案是否像預期的那樣工作？ – mxii

它沒有工作，我結束了每個字體的硬編碼。 – FaridAvesko

你可以解析CSS文件，並提取符號的名字.. :)

@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; 
     }); 
    } 
}

實時演示：https://plnkr.co/edit/udm8QvrrFqqQPyH2DznH?p=preview

來源

2016-12-06 08:07:05 mxii

顯示字體真棒 - 角2

回答

相關問題