如何在面漆圖標按鈕中使用圖標？

Question

可能是一個天真的' - 但我堅持如何把圖標放在面漆圖標按鈕。我正在用刪除和修改按鈕（我想成爲圖標）創建一個動態列表。 任何幫助表示讚賞...

<button class="topcoat-icon-button"> 
    <span class="topcoat-icon" style="background-color:#A5A7A7;"></span> 
</button> 

Answer 1

這是不是一個天真的人，我也來自引導，被抓我的頭，也找不到任何有用的文檔。首先，您需要知道這些圖標位於不同的存儲庫中：https://github.com/topcoat/icons

最簡單的方法是使用字體。所以你需要從該存儲庫的字體目錄。 icomatic.html文件和js文件夾是圖標展示，您不應該部署它們。 icomatic.js似乎是Unicode符號的回退機制，但據我瞭解，它可用於DOM替換，因此可能需要一些調整才能與AngularJS一起使用。如果你不需要回退，你也可以刪除它。

然後，你需要做一些必要的HTML「包括」，假設icomatic文件可在LIB/icomatic：

<link rel="stylesheet" href="lib/icomatic/icomatic.css"/> 

然後，你可以通過使用icomatic類和應用這一切都在您的例子字形，例如「alert」：

<button class="topcoat-icon-button"> 
    <span class="topcoat-icon icomatic" style="background-color:#A5A7A7;">alert</span> 
</button> 

它仍然需要一些樣式，但至少你應該看到一個圖標。