vue中引入iconfont图标
vue中引入iconfont图标本文的主要目的是介绍如何在vue中引入iconfont图标。1、首先需要登录iconfont官网。http://www.iconfont.cn/2、选择喜欢的图标保存到自己的仓库中。3、添加到购物车后,能够添加到项目中。4、保存成功后,在自己的项目中就能够看到了5、查看当前项目的
·
vue中引入iconfont图标
本文的主要目的是介绍如何在vue中引入iconfont图标。
1、首先需要登录iconfont官网。
http://www.iconfont.cn/
2、选择喜欢的图标保存到自己的仓库中。
3、添加到购物车后,能够添加到项目中。
4、保存成功后,在自己的项目中就能够看到了
5、查看当前项目的属性
6、下载资源到本地
7、解压后复制到项目的src/assets文件夹下。
8、修改iconfont.css,把.iconfont修改成如下内容
[class^="el-icon-xy"], [class*=" el-icon-xy"] {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
9、在使用的页面中先引入css
@import "../assets/iconfont/iconfont.css";
<i class="el-icon-xy-sleep"></i>
<el-button icon="el-icon-xy-sleep">sleep</el-button>
11、运行效果:
更多推荐
已为社区贡献16条内容
所有评论(0)