ngFor（Angular 2）中使用的字體真棒和材質圖標

我有一個顯示在右側欄中的動態圖標列表。圖標會根據用戶的操作傳遞到側邊欄。這種動態的圖標陣列使用ngFor顯示。ngFor（Angular 2）中使用的字體真棒和材質圖標

不幸的是，一些圖標來自Font Awesome，一些來自Google Material。

<!--Font Awesome--> 
<i class="{{myIcon}}"></i> 

<!--Material--> 
<md-icon>{{myIcon}}></md-icon> 
<!--Or--> 
<i class="material-icon">{{myIcon}}</i>

看到他們是不完全匹配，你怎麼讓他們顯示使用ngFor什麼也沒有，但圖標的名稱的字符串這兩種。

來源

2017-03-15 ed-tester

你只是使用一個共同的父親來選擇所有'.fa's或''/'.material-icon's並修改其屬性以匹配其他屬性。可能最簡單的方法是將'font-size'應用於'.some-parent .fa {}'。它基本上取決於哪些尺寸合適...... :) –

我有一個解決方案給你。我剛剛實現了這一點。

現在我知道你只是要求* ngFor之間根據圖標字符串動態選擇和渲染適當的圖標，但我將記錄完整的解決方案，包括爲其他人獲取字體真棒註冊。

讓我們從頂部開始，確保您的頭文件中包含字體超讚的CSS。你可以在這裏發郵件給你一個鏈接到他們的CDN版本的鏈接http://fontawesome.io/get-started/，並將其包含在你的頭文件中。

<script src="https://use.fontawesome.com/c26638a4cc.js"></script>

接下來在您的app.module中創建並註冊fontawesome的別名。您可以先導入這些做到這一點：

import { MdIconModule, MdIconRegistry } from '@angular/material';

不要忘記，包括MdIconRegistry在你的供應商

providers: [ 
    ... 
    MdIconRegistry, 
    ... 
    ],

然後讓我們用MdIconRegistry註冊fontawesome在我們的AppModule像這樣..

constructor(..., 
public mdIconRegistry: MdIconRegistry) { 

    mdIconRegistry.registerFontClassAlias('fontawesome', 'fa'); 
    ... 
}

到目前爲止，我們所做的工作使我們能夠在我們的應用程序中使用字體超棒的圖標，如下所示：

<md-icon class="some-class" fontSet="fa" fontIcon="fa-trophy"></md-icon>

現在讓我們回答原始問題，即如何根據圖標字符串動態顯示材質設計圖標或字體超讚圖標。

要做到這一點，我要依靠以'fa-'前綴開始的字體真棒圖標。如果我們對此很滿意，那麼我可以檢查'fa-'並使用它來適當地設置fontSet和fontIcon。

<md-list-item *ngFor="let menuitem of menuList"> 

<button md-button ...> 
    <md-icon [fontSet]="menuitem.icon.substr(0,3) === 'fa-' ? 'fa' : ''" 
      [fontIcon]="menuitem.icon.substr(0,3) === 'fa-' ? menuitem.icon : ''" 
      [ngClass]="{'your-fa-custom-class': true }"> 
    <span>{{ menuitem.name }} </span> 
</button>

ngClass包括.your-fa-custom-class，您可以在其中專門更改字體超棒圖標的字體大小。

你一切都安定！

來源

2017-05-07 00:41:06

ngFor（Angular 2）中使用的字體真棒和材質圖標

回答

相關問題