css - 如何将 Fontello.com 中的字体用作 html 元素？

Question

我想使用一些 Font Awesome 图标，所以我在 www.fontello.com 上选择了它们，我已经更改了前缀 tofa-和font-family: 'fontello'to font-family: 'FontAwesome'并调整了路径。还有什么我需要做的吗？

当我使用带有伪元素的图标时，它可以工作

.sb-icon-search {
        font-family: 'FontAwesome';
        background: #fff;
        &:before {
            content: "\f002";
        }
    }

但是当我想使用这样的图标时它不起作用

 <i class="fa fa-phone" aria-hidden="true"></i>

这是我的 fonts.scss 的一部分

@font-face {
  font-family: 'FontAwesome';
  src: url('assets/fonts/fontello.eot?86494570');
  src: url('assets/fonts/fontello.eot?86494570#iefix') format('embedded-opentype'),
       url('assets/fonts/fontello.woff2?86494570') format('woff2'),
       url('assets/fonts/fontello.woff?86494570') format('woff'),
       url('assets/fonts/fontello.ttf?86494570') format('truetype'),
       url('assets/fonts/fontello.svg?86494570#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

 [class^="fa-"]:before, [class*=" fa-"]:before {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
}

.fa-location:before { content: '\e800'; }
.fa-phone:before { content: '\e801'; }
.fa-mail:before { content: '\e802'; }