uni-app 使用 iconfont 图标 自定义图标
uni-app 的uni-ui 的 Icon 图标组件,裡面的图标只是移动端常见的图标,对于一些其他需求所要显示的图标,这个是完全不够用。那么怎么办?模仿它的组件,用阿里巴巴图标矢量库的图标,自己定义一个图标组件呀。
一、uni-app 图标组件
1、组件文件m-icon里面有两个文件,一个是m-icon.css文件一个是m-icon.vue文件
2、m-icon.css
3、m-icon.vue
4、使用
上面就是uni-app 官网的例子。接下来我们就参考这个自己写一个组件。
二、新建组件
1、uni-icon ,里面有uni-icon.css 和uni-icon.vue 两个文件
uni-icon.css
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
/* 暂时先用官网的url */
src:url('https://at.alicdn.com/t/font_1328537_gk9yl0aa13q.ttf') format('truetype');
} .icon {
font-family: uniicons;
font-size: 48upx;
font-weight: normal;
font-style: normal;
line-height:;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
} .icon.uni-active {
color: #007aff;
}
uni-icon.vue
:class="['icon-'+type]" 对应uni-icon.css 里面的 .icon-scan:before {
content: "\e638";
}
<template>
<view class="icon" :class="['icon-'+type]" :style="{color:color,'font-size':fontSize,'background':background}" @click="onClick()"></view>
</template> <script>
export default {
props: {
/**
* 图标类型
*/
type: String,
/**
* 图标颜色
*/
color: String,
/**
* 图标背景颜色
*/
background: String,
/**
* 图标大小
*/
size: {
type: [Number, String],
default: 24
}
},
computed: {
fontSize() {
var size = Number(this.size)
size = isNaN(size) ? 24 : size
return `${size}px`
}
},
methods: {
onClick() {
this.$emit('click')
}
}
}
</script> <style>
@import "./u-icon.css";
</style>
这里其实可以看出,其实就是和官网的一样,只是换了一下名字。
接下来就是把阿里巴巴图标加进来
三、阿里巴巴图标矢量库
1、注册一个阿里巴巴图标矢量库账号
2、选择自己想要的图标,加入购物车;然后把购物车里面的图标添加至你的项目里面。
3、在我的项目中,下载文件,然后解压,找到iconfont.css文件夹,将里面的【***:before】 全部复制到你现有的工程项目里。
我们先看看iconfont.css是怎样的
uni-icon.css
这里有一个要注意的点
iconfont.css 里面的
.icon-scan:before {
content: "\e638";
}
刚好是.icon前缀和我定义的uni-icon.css 里面的.icon 前缀名字相同,所以直接复制粘贴就可以了。如果我定义的是.uni-icon前缀 的话,那么这个时候uni-icon.css 复制进来的
.icon-scan:before {
content: "\e638";
}
就要改成
.uni-icon-scan:before {
content: "\e638";
}
4、还差一步,就是src的url
将Unicode只要复制.ttf的那个url 添加到uni-app 项目中添加https
uni-icon.css 最终版
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src:url('https://at.alicdn.com/t/font_1302625_v83rvydxjyo.ttf') format('truetype'); //更新这里
} .icon {
font-family: uniicons;
font-size: 48upx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
text-decoration: none;
-webkit-font-smoothing: antialiased;
} .icon.uni-active {
color: #007aff;
}
/* 加进来的图标 */
.icon-scan:before {
content: "\e638";
}
就可以正常使用啦
5、如果后续还有要加入其它的图标呢?
重复上面1、2两步
然后点击更新 Unicode ,将更新后的.ttf的那个url 更新到uni-icon.css 中
最后点击图标 编辑
在uni-icon.css 中加入
.icon-people_fill:before {
content: "\e601";
}
就可以啦 。不需要重新下载解压
uni-app 使用 iconfont 图标 自定义图标的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- Android开发app如何设定应用图标下的应用名称为汉字以及自定义图标
一.应用名称为汉字 二.自定义图标
- ionic2中使用自定义图标
在ionic2中使用自定义图标,如iconfont(阿里巴巴矢量图标). 先在http://www.iconfont.cn/ 中找到自己需要的图标,然后将图标加入购物车,然后下载该图标. 下载完成后解 ...
- 微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...
- Windows 8.1——将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务栏上,同时自定义图标及任务内容.那个功能在IE 9中被称之为JumpList.http:/ ...
- Sencha Touch 2.2.1 Custom Icon 自定义图标
ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/1 ...
- 将网站固定到开始菜单,自定义图标、颜色和Windows推送通知
Windows 8.1——将网站固定到开始菜单,自定义图标.颜色和Windows推送通知 记得在IE 9和Windows 7刚出来那会儿我写过一篇文章来介绍如何自定义网站将其固定到Windows的任务 ...
- ionic2 tabs使用自定义图标
在ionic2中图标是通过类添加的 比如说 tabIcon="homeImg" 在页面中研究可以看到在ios上有一个类是 .ion-ios-homeImg:before 所以我 ...
- ionic2 +Angular 使用自定义图标
结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...
随机推荐
- 2.数码相框-编码(ASCII/GB2312/Unicode)介绍
转载:https://www.cnblogs.com/lifexy/p/8485634.html 在上章-学习了数码相框的框架分析(1)了 本章主要内容如下: 1)熟悉ASCII/GB2312/Uni ...
- centos7下安装zookeeper&zookeeper集群的搭建
一.centos7下安装zookeeper 1.zookeeper 下载地址 https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/ 2.安装步骤 ...
- contos7下安装redis&redis的主从复制的配置&redis 哨兵(sentinel)
一.centos7下安装redis 1.解压 redis-5.0.5.tar.gz 压缩文件 解压命令为: .tar.gz -C redis 解压后进入 redis 工作目录,进入 redis-5.0 ...
- Paper Reading:word2vec Parameter Learning Explained
论文:word2vec Parameter Learning Explained 发表时间:2016 发表作者:Xin Rong 论文链接:论文链接 为了揭开Word2vec的神秘面纱,不得不重新整理 ...
- Mybatis 动态SQL注解 in操作符的用法
在SQL语法中如果我们想使用in的话直接可以像如下一样使用: ,,) ; ,,) ; 但是如果在MyBatis中的使用 in 操作符,像下面这样写的话,肯定会报错: @Update("upd ...
- java基础:多态过程中的动态绑定
重刷java-core的chapter05,P158 重读多态,感觉又不一样了. 记录一下对象方法执行过程: 1. 编译器查看对象声明类型和方法名,如class.fuction(param),cla ...
- vue param和query两种传参方式
1.传参方式 query传参方式 this.$router.push({ path: "/home", query: {code:"123"} }) param ...
- linux实操_shell自定义函数
基本语法: #定义函数 function 函数名(){ 函数体 } #调用函数 函数名 参数1 参数2... 实例:计算两个数的和. 运行后
- 2、组件注册-@Configuration&@Bean给容器中注册组件
2.组件注册-@Configuration&@Bean给容器中注册组件 2.1 创建maven项目 spring-annotation pom.xml文件添加 spring-context 依 ...
- 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753 背景不多介绍了,直接上代码. ...