自定义字体如何加入:before{content:" "}里

项目中，想做一个白底蓝字，蓝底白字的上传进度条。
在网上搜索到一个方案：

即要用到:before :after伪元素的content属性。
但我要做的又有不同，这个进度条不仅仅有字，还有一个“✖️”的图标，这个✖️是给用户取消上传用的。所以content里面还要包含一个“✖️”。
我的✖️用的是font-awesome的，在HTML用以下方式使用：

那content里面是没法加html代码的呀，怎么办呢？
因此，引出了字体的问题。
通过查资料得知，在使用content的过程中， content:"我" 和 content:"\6211" 的含义是一样的。也即是说，我们在content里看到的字，其实也是一段16进制的unicode编码。
而font-awesome也正好是一套字体，只不过他的字体形状是一些符号罢了。
去node_modules里的font-awesome.css去找，发现fa-times-circle对应的编码为'\f057'

.fa-times-circle:before {
  content: "\f057";
}

我兴高采烈地copy到我的项目中：

.uploading-file-container:before{
    content: "\f057";
  ...
  }

悲催地发现期望的图标结果没有出来，只出现一个空白框。
由于之前项目有过引入open-sans字体的经验，所以我推测是因为没有引入字体导致。
于是我把node_modules里font-awesome对应的fonts文件夹拷贝到项目的assets目录下，同时在/assets/css里新建一个文件font-awesome.css，模仿node_modules/font-awesome/css/font-awesome.css文件，引入字体:

代码1:
@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;
}

然后在我的uploaderComponent的