-1

Might be a naive' one - but I am sort of stuck on how to put a icon in topcoat icon button. I am creating a dynamic list with delete and modify buttons (which I want to be icons). Any help is appreciated ...

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

1 回答 1

3

这不是天真的，我也是从Bootstrap出来的，摸不着头脑，找不到任何有用的文档。首先，您需要知道图标位于不同的存储库中：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>

它仍然需要一些样式，但至少您应该看到一个图标。

于 2014-02-10T20:18:28.047 回答