美酒没故事° 2024-01-16 17:27 采纳率: 38%
浏览 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 电脑最近经常蓝屏,求大家看看哪的问题
  • ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
  • ¥50 C++五子棋AI程序编写
  • ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
  • ¥15 SQL Server analysis services 服务安装失败
  • ¥15 基于面向对象的图书馆借阅管理系统
  • ¥15 opencv图像处理,需要四个处理结果图
  • ¥20 centos linux 7.9安装php8.2.18不支持mysqli模块的问题
  • ¥15 stata空间计量LM检验
  • ¥15 关于k8s node节点被释放后如何驱逐节点并添加新节点