Question

我使用其Unicode语法在我的组件模板中定义了以下Font Awesome图标。但是，它似乎不会在视图中呈现。我得到的输出是\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剃刀视图中使用该组件。

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

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>

Vue.js - 渲染字体使用组件内的unicode语法无法正常工作

1 个答案: