Как использовать значки шрифтов пользовательского интерфейса внутри углового приложения

Question

Я разрабатываю макеты в Sketch, и я использую иконки для дома и поиска из шрифта пользовательского интерфейса, предназначенного для значков. Теперь я хочу отображать эти значки в своем угловом приложении, используя 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;} 

Тогда все, что вам нужно do в html/view добавляет класс к элементу и помещает имя значка в текст внутри элемента:

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

Вы можете даже положить несколько значков в одном DIV:

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

Обратите внимание, что это не может работать в производстве, если не добавить шрифт в папку шрифтов и ссылаться на него в CSS с помощью @ шрифтом лица.