微信小程序 - 提取字体图标与其优化
微信小程序,无论是字体图标还是图标,都差不多,只不过是为了以后字体图标修改方便,或者加效果方便而使用它而已!
1. 下载font-awesome
http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip
2.解压后,找到fontawesome-webfont.ttf

3.然后进入以下网站进行格式转换

4.下载到本地

5.把css文件提出来

6.新建一个wxss文件,然后把 font-awesome.css里面的内容复制一遍(除了标红线以外)


复制到wxss文件中。
7.然后再将里面的内容复制到wxss文件中(最好就是将stylesheet.css改成.wxss文件后缀,最后就是把font-awesome.css复制一遍到其尾部即可)

8.OK了,现在可以直接用了

9.不过你觉不觉得这字体图标太大了,我的天(我才用两个字体图标,还不如用图片呢)


10. 字体图标与font-awesome同步(可单独选择自己需要的字体图标)
微信小程序 - 提取字体图标与其优化的更多相关文章
- 微信小程序使用字体图标
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网 ...
- 微信小程序 使用字体图标 iconfont
第一步:在阿里巴巴矢量图标库下载需要的图标 地址:https://www.iconfont.cn/ 添加至项目 第二步:打开在线代码 将在线代码复制 第三步:点击下载至本地下载图标 将下载的downl ...
- 微信小程序 - 使用字体图标(阿里云库)
实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...
- uni/微信小程序 - 使用字体图标
阿里字体图标:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 1.单个/ 多个选择字体图标 2. 导入字体库 可以参考 ...
- 微信小程序使用字体图标的方法
一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://tran ...
- 微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...
- 微信小程序使用阿里图标
微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...
- 微信小程序内容组件图标 icon
小程序内置了一下图标可以用 需要自定义图标的看这里 ==>微信小程序中使用iconfont/font-awesome等自定义字体图标 小程序内置图标使用示例 <icon type=&quo ...
- 微信小程序 canvas 字体自动换行(支持换行符)
微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...
随机推荐
- AHB2reg接口转换
assign mcu_xxx_addr = (rd_after_wr_reg || reg_valid_write_trans) ? haddr_reg[ADDR_WIDTH+:] : haddr[A ...
- Struts 2 动作注释 配置动作扩展 全局开关
动作注释package com.yiibai.user.action; import org.apache.struts2.convention.annotation.Action; import o ...
- prometheus + mysqld_exporter + grafana 实现对mysql db的监控
https://blog.csdn.net/hfut_wowo/article/details/78536022 1.参考这篇博文2.博主的用的是windows版本 prometheus-2.5.0- ...
- luogu2805 [NOI2009]植物大战僵尸
想象一下,要搞掉一个植物,必须先搞掉另一些植物--我们可以发现这是一个最大权闭合子图的问题. 最大权闭合子图的话,太空飞行计划问题是一个入门题,可以一看. 然而我们手玩一下样例就会惊恐地发现,保护关系 ...
- 大数据学习——sqoop导出数据
把数据从hadoop导出到关系型数据库 将数据从HDFS导出到RDBMS数据库 导出前,目标表必须存在于目标数据库中. u 默认操作是从将文件中的数据使用INSERT语句插入到表中 u 更新模式下 ...
- A. Light Bulb
A. Light Bulb Time Limit: 1000ms Case Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO f ...
- 2017 Multi-University Training Contest - Team 4
日常绝望系列 Questionnaire HDU - 6075 In order to get better results in official ACM/ICPC contests, the te ...
- BZOJ 1087 [SCOI2005]互不侵犯King ——状压DP
[题目分析] 沉迷水题,吃枣药丸. [代码] #include <cstdio> #include <cstring> #include <iostream> #i ...
- (2015大作业)茹何优雅的手写正则表达式引擎(regular expression engine
貌似刚开学的时候装了个逼,和老师立了个flag说我要写个正则表达式引擎,然后学期末估计老师早就忘了这茬了,在历时3个月的懒癌发作下,终于在这学期末deadline的时候花了一个下午加晚上在没有网的房间 ...
- JS return false 与 return true
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符 ...