美酒没故事° 2024-01-16 17:27 采纳率: 34.4%
浏览 5

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

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

  • 写回答

1条回答 默认 最新

  • 叫兽-郭老师 Java领域新星创作者 2024-01-16 17:32
    关注

    首先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。希望能帮到你,如果仍有任何问题,欢迎继续提问。

    评论

报告相同问题?

问题事件

  • 修改了问题 1月17日
  • 创建了问题 1月16日

悬赏问题

  • ¥15 关于#vscode#的问题:ESP32开发板对接MQTT实现小灯泡的开关
  • ¥15 TMC2209串口模式下读取不到寄存器的值串口助手蓝色字体是发过去的消息,绿色字体是收到的消息,第二行发送读取寄存器的指令但是没有读取到寄存器的值串口助手如下图:接线如下图,如何解决?
  • ¥15 高通安卓11提取完整线刷包软件,或者优博讯dt50顺丰刷机包
  • ¥20 C,有个译码器,换了信道就跑不出原来数据
  • ¥15 MIMIC数据库安装问题
  • ¥60 基于JTag协议开发Fpga下载器上位机,哪位大🐂有偿指导?
  • ¥20 全书网Java爬取数据
  • ¥15 怎么获取红包封面的原始链接,并且获取红包封面序列号
  • ¥100 微信小程序跑脚本授权的问题
  • ¥100 房产抖音小程序苹果搜不到安卓可以付费悬赏