vue自定义图标
来源:互联网 发布:淘宝网天天特价连衣裙 编辑:程序博客网 时间:2024/06/06 05:22
一.图标库
1.1图标引用
图标引用可适用于移动端和web端,本文主要讲述web端的离线引用,其它平台可参考官方介绍.
1.1.1图标下载
注册登入
新建项目
项目设置
图上红圈处的引用名称为了防止与本地项目中的其它引用冲突,可自行设置
- 搜索并添加你需要的图标
- 将图标添加到你的项目中
进入刚才添加的项目,可以看到官方为我们提供了在线引用,但是为了减轻项目负载,我们这边使用本地引用.
下载至本地并解压
然后复制到项目中(assets文件夹中新建了一个icon文件夹);
其中有一些demo和样例可以不用导入项目,但是为了给其他人一个参考最好全部拷入.打开icnfont.css文件,设置图标属性及引用标签.
.iconfont { font-family:"iconfont" !important; font-size:55px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}//添加引用标签,icon-test为我们一开始新建项目时的FontClass/Symbol前缀[class^="icon-test"], [class*=" icon-test"] { font-family:"iconfont" !important; /* 以下内容参照第三方图标库本身的规则 */ font-size: 66px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}//设置指定图标属性.icon-test-icon-test10 { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden;}
1.1.2页面引用
①在你的xxx.vue页面引入css文件和js文件
import '@/assets/icon/iconfont.css'import '@/assets/icon/iconfont.js'
Unicode与Font class方式不支持多色图标;Symbol方式支持多色图标所以这边引入了js文件.图标详情及设置可去对应的.css文件修改.
<div> <i class="iconfont"></i> <i class="iconfont icon-test-icon-test2"></i> <el-button type="primary" class="icon-test-icon-test17" @click="" style="padding:6px 4px;width: 70px"></el-button> <el-button type="primary" class="icon-test-icon-test14" @click="" style="padding:6px 4px;width: 70px"></el-button> <i class="iconfont icon-test-icon-test10"></i> <svg class="icon-test-icon-test10" aria-hidden="true"> <use xlink:href="#icon-test-icon-test10"></use> </svg> <svg class="icon-test-icon-test8" aria-hidden="true"> <use xlink:href="#icon-test-icon-test8"></use> </svg></div>
- Unicode 方式:
<i class="iconfont"></i>
- Font class方式:
<i class="iconfont icon-test-icon-test2"></i>
- Symbol方式:
<svg class="icon-test-icon-test10" aria-hidden="true"> <use xlink:href="#icon-test-icon-test10"></use></svg>
- 效果图:
1.1.3制作与上传
由于本人不是专业的UI,对图标制作这块并未做过多深入研究,想了解的朋友可以参考官网.
注:本文所有图标来源:阿里巴巴矢量图标库
阅读全文
1 0
- vue自定义图标
- vue中的路由及自定义图标
- VUE-SVG图标
- 自定义图标
- vue自定义指令-vue-reclick
- vue怎么放网页图标
- vue中引入iconfont图标
- Vue中怎么设置图标
- vue之图标字体制作
- vue自定义事件???
- vue event 自定义事件
- vue 自定义指令
- vue自定义日期组件
- Vue自定义指令-拖拽
- Vue自定义键盘信息
- Vue自定义过滤器
- Vue自定义组件
- Vue.js--自定义指令
- 关于二叉树的非递归遍历
- 向CMD窗口发送CTRL+C 只能第一次生效
- SCAU 8615 快乐
- 深度学习: marginal cost (边际成本)
- web前端第十天
- vue自定义图标
- java-SpringMVC框架导出Excel格式数据
- spring boot 配置freemarker及使用freemarker渲染页面
- 最长公共子序列
- spring mvc相关源码剖析
- Java中对象的装箱与拆箱
- python 中map函数使用
- 教你搭建自己的shadowsocks
- undefined和not defined的区别