如何在角应用程序内使用UI字体图标

Question

我在Sketch中设计模型，我正在使用设计用于图标的UI字体中的主页和搜索图标。现在我想使用html和css在我的角度应用程序中显示这些图标。似乎没有任何在线资源可以教会如何执行此操作。我使用过像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>

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