Petite Vue中v-for循环内Font Awesome图标无法显示问题求助

问题出在你用字符串插值拼接class的写法上，Petite Vue不会正确解析这种模板里的动态类名，换用class绑定语法就能解决：

• 原无效写法：

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

• 修改后的有效写法：

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

  也可以用更清晰的数组形式（适合多类名场景）：

  <i :class="['fa', 'fa-thin', `fa-${item.icon}`]"></i>
  

原因很简单：Petite Vue会把fa-{{ item.icon }}当成静态字符串直接渲染，最终生成的class是fa fa-thin fa-{{ item.icon }}，Font Awesome自然识别不了这个无效类名。而:class绑定会让Petite Vue计算表达式的值，生成正确的图标类名。

另外确认下你的Font Awesome Pro Kit已正确引入，且item.icon的值是不带前缀的正确图标名称（比如user、home这类）。

内容的提问来源于stack exchange，提问作者Chris