javascript - Vue.js - 在组件内部使用 unicode 语法渲染 Font Awesome 不起作用

Question

我在我的组件模板中使用其 Unicode 语法定义了以下 Font Awesome 图标。但是，它似乎没有在 View 内呈现。我得到的输出是 \uf040。

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

CSS:

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

注意:我在 asp.net MVC razor View 中使用该组件。

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

Answer 1

您需要对字符串 '\uf040' 进行转义。您可以使用过滤器来做到这一点，如下所示:

new Vue({
  el: '#app',
  filters: {
    unescape: v => unescape(v)
  }
})

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>

<div id="app">
  <span class="text-muted icon-before" :data-icon="'\uf040' | unescape" >
    Edit
  </span>
</div>