如何在vue项目中使用iconfont图标

43 阅读1分钟

之前使用的一种方法需要封装svg组件,用起来很麻烦,无法方便的去修改图标的大小或者样式。现使用一种简洁的方法。

1.进入iconfont官网挑选图标,并添加到自己的项目中

2.选择引入方式

image.png

image.png

3.项目中引入

在项目的index.html文件中新增link标签,并把href改成你刚刚复制的内容 image.png 之后如果有新增图标,则重复步骤1和步骤2,然后更新href为相应的链接

4.在项目中使用图标

<i class="iconfont icon-lock"></i>
//把icon-lock改成自己图标的名称

5.修改大小或者样式

直接通过类选择器添加相应属性进行修改即可