vue中引入iconfont图标
来源:互联网 发布:天猫魔盘连接不上网络 编辑:程序博客网 时间:2024/05/16 00:43
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、运行效果:
阅读全文
0 0
- vue中引入iconfont图标
- 微信小程序----引入外部字体库iconfont的图标
- iconfont图标
- iconfont图标
- vue 中打包iconfont 出错问题!!!
- iconfont.cn中字体图标的问题
- android中使用iconfont图标字体
- 在iOS开发中使用iconfont图标
- 在iOS开发中使用iconfont图标
- 在html文档中添加 iconfont 图标
- webpack中如何使用iconfont字体图标
- 在iOS开发中使用iconfont图标
- iconfont字体图标四中制作方法
- iOS- 开发中使用iconfont图标
- vue中引入jquery
- vue中引入bootstrap
- vue中引入bootstrap
- vue中引入jQuery
- 常用 js 代码
- MVC、MVP、MVVM的理解与使用
- [2]_解决在海思SDK包中的执行 ./sdk.unpack出现的问题
- 【opencv】VS2015+opencv2.4.13 GPU模块编译
- 使用嵌套循环,打印字母
- vue中引入iconfont图标
- 二叉树
- ElasticSearch Java Api(一) -创建索引
- Magic Powder
- 学生成绩统计
- Android构建boot.img
- ElasticSearch Java Api(二) -检索索引库
- Shrio RBAC框架
- js---js中数组遍历方法forEach与map()有什么区别?