Vue Naive Admin 怎么接入Font Awesome4 图标啊？

Question

原来vue2项目用的 Font Awesome 4 图标库，现在要升级vue3，网上找了个开源项目 Vue Naive Admin替换
但发现项目用的是UnoCss量子化样式引擎，我原来的图标还要 npm i font-awesome 吗？没看懂UnoCss怎么接入其他图标的

Answer 1

首先Font Awesome 4是一款图标集合，你可以使用npm将其安装至项目中，也可以通过标签将cdn链接引入。
如果你要通过UnoCSS接入icon，并且你项目中已安装了@iconify/json这个包的话，你只需在你的 uno.css.config.js 文件中给 presets 添加 @unocss/preset-iconify即可。
// uno.css.config.js

export default {
  presets: [
    'default',  // default presets
    require('@unocss/preset-iconify'),  // iconify presets
  ]
}

然后你便可以在Vue模板中像下面这样使用icon：

<div class="iconify-font-awesome:o-alarm-snooze"></div>

这里 font-awesome 是你要用的图标集合的名字，o-alarm-snooze 是图标的名字。
备注: 不同的图标集合名称不一样，你可以到 Iconify 图标集合 网站中查看具体的图标集合名称以及图标名称。
同时，由于UnoCSS的preset-iconify是依赖于@iconify/json的，所以你需要保证你的项目中已经安装了这个npm包，如果没有的话，需要先进行安装：

npm install @iconify/json

以上步骤即可完成Font Awesome 4在UnoCSS中的接入。你不需要在npm安装font-awesome。希望能帮到你，如果仍有任何问题，欢迎继续提问。