css - 如何通过在 CSS 中导入字体来使用自定义图标

Question

我想使用来自https://www.dafont.com/arrow-7.font的 @import 在 CSS 中使用一个图标。由于某种原因，图标无法加载。知道我在这里做错了什么吗？谢谢！

<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';
}

标签： css

Answer 1

content仅对伪元素有效，例如：

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

否则字体会加载。