Javascript Vue.js-在组件内部使用unicode语法呈现字体效果不正常

我在我的组件模板中使用Unicode语法定义了以下字体图标。但是，它似乎不会在视图内部渲染。我得到的输出是

\uf040

<template>
  ...
    <span class="text-muted icon-before" data-icon="\uf040" >
      Edit
    </span>
  ...
</template>

注意：我使用的是asp.net MVC razor视图中的组件

---

有什么办法可以解决这个问题吗？

您需要取消对字符串

'\uf040'

的替换。您可以使用过滤器来完成此操作，如下所示：

newvue({
el:“#应用程序”，
过滤器：{
unescape:v=>unescape（v）
}
})

.icon在[数据图标]之前：在{
颜色：继承；
内容：属性（数据图标）；
字体系列：“FontAwesome”；
字体风格：普通；
}

编辑

genius…为我节省了大量时间。

.icon-before[data-icon]:before {
  color: inherit;
  content: attr(data-icon);
  font-family: 'FontAwesome';
  font-style: normal;
}