如何在棱角分明的应用程序中使用UI字体图标

Question

我在Sketch中设计实体模型，我使用为图标设计的UI字体中的主页和搜索图标。现在我想用html和css在我的angular应用程序中显示这些图标。网上似乎没有任何资源可以教你如何做到这一点。我以前使用过FontAwesome等资源，这些资源有关于如何做到这一点的非常清晰的文档。

Answer 1

我通过右键单击复制草图内部图标的CSS属性来实现它：

/* home: */
font-family: UIFont-Solid;
font-size: 30px;
color: #FFFFFF;

所以把这个添加到你的css中：

.icon {font-family: UIFont-Solid; font-size: 30px; color: #FFFFFF;}

然后，在html/view中所要做的就是将类添加到元素中，并将图标的名称作为文本放入元素中：

<div class="icon">home</div>

您甚至可以将多个图标放在同一个div中：

<div class="icon">home search help</div>

请注意，除非您将字体添加到字体文件夹并使用@font face在css中引用它，否则这可能在生产中不起作用。