如何在字体目录中加载真棒字体？

Question

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

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

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

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

@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 class

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

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

如何在字体目录中加载真棒字体？

How to load font awesome in fonts directory?

css

font-face

font-awesome