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

我想在CSS中使用@import from图标。由于某些原因，图标无法加载。知道我做错了什么吗？ 谢谢大家!

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

@字体{
字体系列：myFirstFont；
src:url（“myserverDirectory/arrow_7.tff”）；
}
.图标{
高度：40px；
宽度：40px；
字体系列：myFirstFont；
内容：'/0112'；
}

内容

仅对伪元素有效，例如：

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

否则将加载字体