css - 如何在字体目录中加载 Font Awesome ？

Question

我无法在 fonts 目录中加载 font awesome，在 font awesome 中有如下图标样式:

.fa-star:before {
  content: "\f005";
}

我要获取内容:"\f005";并放入我自己的样式，但我认为目录字体未加载，如何在目录字体中加载 Font Awesome 文件？

我尝试将此代码添加到我的样式中:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

并复制字体文件夹。

这里是我的样式代码:

.example li a:before {
    float: left;
    font-size: 10px;
    content: "\f005";
}

这是我的目录结构

- assets
-- css
   mystyle.css
-- fonts
   FontAwesome.otf
   fontawesome-webfont.eot
   fontawesome-webfont.eot
   fontawesome-webfont.svg
   fontawesome-webfont.ttf
   fontawesome-webfont.woff
   fontawesome-webfont.woff2

Answer 1

只需为您的自定义类添加font-family

.fa-star{
    font-family: 'FontAwesome';
}

.fa-star:before {
    content: "\f005";
}