在vue、element-ui项目中使用iconfont

发布于:2023-01-04 ⋅ 阅读:(143) ⋅ 点赞:(0)

一、iconfont是什么?

iconfont是用字体文件取代图片文件,来展示图标、特殊字体等元素的阿里巴巴MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

二、使用步骤

1.访问iconfont网页

链接: https://www.iconfont.cn/

2.下载图标

在这里插入图片描述

3.打包

在这里插入图片描述
之后下载到本地之后下载到本地

在这里插入图片描述
打开你的项目 找到src/assets文件夹 新建文件夹 起名字logo
copy文件到logo文件夹
在这里插入图片描述

4.使用

点击demo_index.html 文件可以找到使用方法
在main.js添加依赖

import './assets/logo/iconfont.css';
import './assets/logo/iconfont.js';

不添加依赖会报错

5.举例

 <span class="icon logofont logojulishuoming"></span>

或者

<svg class="icon svg-icon" aria-hidden="true">
   <use xlink:href="#logojulishuoming"></use>
</svg>

都是可以显示图标的 可以动手试一试