如何使用Fontello.com中的字体作为html元素？

Question

我想使用一些Font Awesome图标，所以我在www.fontello.com上选择了它们，我已将前缀改为fa-而font-family: 'fontello'改为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'; }