在 Petite Vue 中使用 Font Awesome

Question

我正在尝试将 Font Awesome 与 Petite Vue 一起使用。由于它是 Vue 的轻量级版本，没有构建步骤，因此我无法使用 Font Awesome Vue 组件。

我正在使用 Font Awesome Pro Kit（网络字体以避免 CORS 问题）并在

<script>

标签中导入 Font Awesome 和 Petite Vue。

但是，当在

v-for

循环内时，我无法显示 Font Awesome 图标。

<i class="fa fa-thin fa-{{ item.icon }}"></i>

它在

v-for

循环之外工作得很好，即使仍在

v-scope

标签内并且硬编码图标名称也可以。如果不使用 Petite Vue，它也能按预期工作。

Answer 1

我设法通过使用

v-effect

动态添加图标名称类来实现此功能。

<i class="fa fa-thin" v-effect="$el.classList.add('fa-' + item.icon)"></i>

Answer 2

您可以使用

v-bind

（又名。

:

）指令来计算表达式并将其用作类。它可以在

v-for

循环中查看循环变量。

<i class="fa fa-thin" :class="'fa'+item.icon"></i>