Как использовать пользовательский значок, импортировав шрифт в CSS

Question

Я бы хотел использовать иконку в CSS, используя @import из https://www.dafont.com/arrow-7.font. По какой-то причине иконка не загружается.Есть идеи, что я здесь делаю не так?Спасибо!

<div class="icon">

</div>



@font-face {
    font-family: myFirstFont;
    src: url("myserverDirectory/arrow_7.tff");
}

.icon {
height:40px;
width:40px;
font-family:myFirstFont;
content:'/0112';
}

Answer 1

content является допустимым свойством только для псевдоэлементов, например:

.icon::before{
  content: '/0112';
  display: inline-block;
  font-family: 'myFirstFont';
  height: 40px;
  width: 40px;
}

В противном случае шрифт загружается.