nuxt引用iconfont字体图标

墨蓝 2021-08-13 23:52 652阅读 0赞

# 下载 #

阿里巴巴矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70]

# 引入 #

在assets目录下新建css、fonts、js目录  
![在这里插入图片描述][20191218152347790.jpg]  
    注意iconfont.css里的文件路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 1]

# 配置 #

在 nuxt.config.js 文件里添加配置

css: [
      '@/assets/css/iconfont.css'
    ],
    plugins: [
      // ssr: Boolean (默认为 true) 如果值为 false，该文件只会在客户端被打包引入
      {  src: '@/assets/js/iconfont.js', ssr: false }
    ]

# 使用 #

<template>
      <div class="wrapper">
        <i class="iconfont"></i>
      </div>
    </template>

[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70]: /images/20210813/2023fa0cb38f49a0b4a9c1d8abf4d6db.png
[20191218152347790.jpg]: /images/20210813/5a7634f754ad4bf385e3b0ff5eca8620.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70 1]: /images/20210813/e6378d584e7a4f29976699ce6fea213e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，652人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 iconfont 字体图标

<i class="iconfont icon-home"></i> 使用时只需要添加class=“iconfont icon-xxx”，xxx可以去阿里巴巴矢量...

迈不过友情╰/ 2024年04月19日 14:58/ 0 赞/ 74 阅读

相关微信小程序——Iconfont字体图标的引用

一，创建项目在iconfont阿里巴巴字体图库里面创建项目，添加好你需要的图标到项目中 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

港控/mmm°/ 2023年02月22日 15:53/ 0 赞/ 5 阅读

相关 vue 项目引用 iconfont 彩色图标

1.先下载 iconfont 图标库到本地，解压放到项目assets或static文件夹下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

深藏阁楼爱情的钟/ 2023年01月17日 08:49/ 0 赞/ 205 阅读

相关 uni-app 导航栏使用iconfont 字体图标（unicode引用方式）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

本是古典何须时尚/ 2023年01月12日 13:00/ 0 赞/ 457 阅读

相关 iconfont symbol引用，展示彩色字体图标

1.去阿里巴巴图标库中找到自己的项目，选择symbol ，下载到本地。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

迷南。/ 2023年01月12日 11:59/ 0 赞/ 277 阅读

相关如何引入iconfont的字体图标

首先在[阿里巴巴矢量字体图标库。][Link 1] 把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。

水深无声/ 2022年12月20日 05:35/ 0 赞/ 283 阅读

相关 bootstrap字体图标引用

qq群： 581478349 <!DOCTYPE html> <html> <head> <title></titl

缺乏、安全感/ 2021年09月18日 13:50/ 0 赞/ 463 阅读

相关 nuxt引用iconfont字体图标

下载阿里巴巴矢量图标库：[https://www.iconfont.cn/][https_www.iconfont.cn] ![在这里插入图片描述][wat

墨蓝/ 2021年08月13日 23:52/ 0 赞/ 653 阅读

相关 iconfont字体使用彩色图标

1.先将选择好的图标加入购物车 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

╰+攻爆jí腚メ/ 2021年08月13日 13:43/ 0 赞/ 658 阅读

相关 uniapp使用iconfont字体图标

情景1：使用灰色的字体图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

た入场券/ 2021年07月24日 13:40/ 1 赞/ 714 阅读