小程序中使用阿里图标库iconfont

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。

第一步:下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为:

搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。

点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:

第二步:转换ttf文件

进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式。流程如下:

点击下载,得到转换后的压缩包,名为transfonter.org-开头。解压可以得到如下图的几个文件:

第三步:在微信小程序中使用

新建微信小程序,将默认生成的代码删除。

1--在index.css文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,将其中的内容全部复制到index.css文件中。注意是转换过的那个文件。

2--打开没有转换过的download.zip解压出来的文件,找到iconfont.css文件,将这个文件中的内容复制到index.css文件中。@font-face这部分不要。

3 --在index.wxml中使用字体图标。代码如下:

<!--index.wxml-->
<view class="container">
个人中心
<text class="iconfont icon-wode" style="font-size:50px;color:red"></text>
</view>

字体图标跟字体一样,可以通过font-size来改变大小,通过指定color来改变他的颜色。

总结:到这里微信小程序的字体图标的使用就完成了,这里经过转换成64位编码之后,直接将样式放在css文件中即可,并不需要引入其他以外的文件。

小程序中使用阿里图标库iconfont的更多相关文章

  1. 在微信小程序中使用阿里图标库Iconfont

    首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...

  2. vue中使用阿里图标库iconfont和在旧有的iconfont中添加新的图标

    第一步 下载样式http://www.iconfont.cn/选择图表,点击加入购物车 第二步 解压下载文件 第三步 修改文件名称 与 iconfont.css 名路径 第四步 将@font-face ...

  3. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  4. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

  5. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

  6. 微信小程序中使用阿里ICON图标

    由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...

  7. 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  8. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  9. 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

随机推荐

  1. 用mongols轻松打造websocket应用

    用websocket做聊天系统是非常合适的. mongols是一个运行于linux系统之上的开源c++库,可轻松开启一个websocket服务器. 首先,build一个websocket服务器. #i ...

  2. 03-python3.5-模拟购物车流程--更新追加细节注释功能

    03-python3.5-模拟购物车流程--更新追加细节注释功能: 模拟购物车更新脚本: #!/usr/bin/env python #-*- coding: utf-8 -*- #__author_ ...

  3. Qt3D Shader

    --------------------------------------------------- Qt3D ShaderPrograme Qt3D GLSL 渲染器 Shader示例可参考: h ...

  4. 最简单的 react-router4 的安装和使用

    React-Router 的安装  npm install react-router React-Router提供了两个组件:Router和Route.下面看最简单的例子: src/Routes.js ...

  5. IO字节流概念

    1.输入和输出概念: 输入:硬盘到内存为了使用: 输出:内存到硬盘为了保存: 2.一切皆为字节: 计算机只识别二进制数字,一个字节为8个二进制数字: 存储在硬盘是字节,传输也是字节:

  6. (cvpr2019 ) Better Version of SRMD

    SRMD的内容上篇,已经介绍,本文主要介绍SRMD的升级版,解决SRMD的诸多问题, 并进行模拟实验. 进行双三次差值(bicubic)===>对应matlab imresize() %% re ...

  7. postgresql 自定义函数

    CREATE OR REPLACE FUNCTION "public"."pm25_aqi"("pm25_nd" numeric) RETU ...

  8. 组件 restful_API

    1 token 认证 2 权限 3 注册器和响应 4 频率组件

  9. oracle密码过期问题解决

    1.查看open用户 select username,account_status,expiry_date,profile from dba_users; 2.查看目前密码过期策略 select * ...

  10. TCP/IP学习

    1.TCP/IP网络包括两部分 ①传输协议 ②网络协议