微信小程序如何使用阿里妈妈iconfont图标库

1、首先进入iconfont首页，没有账号的先注册账号

http://www.iconfont.cn/

2、选择需要的图标，加入到你的小车中

3、在这里新建一个项目将图标加进去，这个时候就可以查看并且下载下来了

4、点击download code将图标代码下载下来，解压后找到iconfont.css文件打开，将内容全部复制到你需要添加图标的wxss文件中，然后再到阿里妈妈iconfont的项目中将@font-face的代码替换掉

@font-face {font-family: 'iconfont';  /* project id 505251 */src: url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.eot');src: url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.woff') format('woff'),url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.ttf') format('truetype'),url('//at.alicdn.com/t/font_505251_xz8fpgd9ky3f2yb9.svg#iconfont') format('svg');
}

5、在view中引用图标就OK了

  <navigator url="/pages/navigate/navigate" hover-class="navigator-hover"><text class="iconfont icon-kehu"></text>\n关于我们</navigator>

.icon-qiye:before { content: "\e6ad"; }.icon-kehu:before { content: "\e6ae"; }.icon-crm:before { content: "\e6af"; }

图标的颜色改变和大小变更还没搞清楚如何操作，还要研究下

微信小程序如何使用阿里妈妈iconfont图标库相关推荐

微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
微信小程序中使用阿里矢量字体图标
阿里矢量图库<----地址第一步: 第二步: 第三步: 第四步: 第五步:
微信小程序中使用阿里iconfont
1.从阿里iconfont中下载自己的iconfont项目 2.下载成功之后解压至项目文件夹下我们需要用到的文件只有以上箭头的四个 3.如果我们直接使用.ttf .woff .woff2文件,在进行 ...
微信小程序+阿里物联平台+合宙Air724UG搭建无服务器物联系统（三）---微信小程序直连阿里物联平台AliIoT
前一段时间集中设计系统整体方案,物联网平台搭建.小程序编写,硬件电路设计.SOC单片机程序开发,自己挖的坑太大了,填起来真是费劲啊!整个年假都用来填坑了,也没有时间编写博文,今天忙里偷闲集中整理一下开 ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
微信小程序录音直传阿里云OSS并语音识别
前言如题:做一个录音文字识别功能,知识点有三个,分别是微信小程序的录音功能.录音文件直传阿里云OSS.使用阿里云的录音文件识别接口返回识别后的文字一.微信小程序录音官方文档:微信小程序全局唯一的 ...
微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标第一步先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个压缩包,解压压缩包里面有一个css的文件 ...
微信小程序：实现可拖动悬浮图标（包括按钮角标的实现）
微信小程序:实现可拖动悬浮图标在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现. 运行截图: 主要代码: js: var start ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...

微信小程序如何使用阿里妈妈iconfont图标库

微信小程序如何使用阿里妈妈iconfont图标库相关推荐

最新文章

热门文章