首页 > 编程知识 正文

阿里矢量图标怎么使用,vue打包app字体图标方框

时间:2023-05-04 13:44:36 阅读:152010 作者:562

1 .进入阿里图库网站: http://www.iconfont.cn 2 .选择所需图标放入购物车(如果不想用unicode方式使用图标,直接下载png等形式即可

3 .在浏览器右上角进入购物车,然后单击下载代码

4 .解压缩后,选择并复制下图中的五个文件。 其他是demo文件,教你使用方法。

5 .在项目的assets目录下创建了一个新的fonts目录,并放入了这五个文件

打开iconfont.css,为了方便起见,更改了默认图标变量名称,并将图标大小font-size更改为24px

7 .然后将此css文件导入main.js

8 .然后我在我的Home.vue文件中使用这两个图标

9 .最后一个屏幕上显示的效果如下图所示

注: i标签中的class第一个参数,第一个参数一定是iconfont,第二个参数是iconfont.css中收起和展开下面的icon-menu-***

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。