微信小程序，无论是字体图标还是图标，都差不多，只不过是为了以后字体图标修改方便，或者加效果方便而使用它而已！

1. 下载font-awesome

http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip

2.解压后，找到fontawesome-webfont.ttf

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

https://transfonter.org/

4.下载到本地

5.把css文件提出来

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

复制到wxss文件中。

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

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

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

10. 字体图标与font-awesome同步（可单独选择自己需要的字体图标）

http://fontello.com/

微信小程序 - 提取字体图标与其优化的更多相关文章

  1. 微信小程序使用字体图标

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

  2. 微信小程序 使用字体图标 iconfont

    第一步:在阿里巴巴矢量图标库下载需要的图标 地址:https://www.iconfont.cn/ 添加至项目 第二步:打开在线代码 将在线代码复制 第三步:点击下载至本地下载图标 将下载的downl ...

  3. 微信小程序 - 使用字体图标（阿里云库）

    实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...

  4. uni/微信小程序 - 使用字体图标

    阿里字体图标:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 1.单个/ 多个选择字体图标 2. 导入字体库 可以参考 ...

  5. 微信小程序使用字体图标的方法

    一.先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 从项目里下载下来并解压,找到ttf格式文件 二.到这个平台https://tran ...

  6. 微信小程序自定义字体及自定义图标问题说明

    自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...

  7. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  8. 微信小程序内容组件图标 icon

    小程序内置了一下图标可以用 需要自定义图标的看这里 ==>微信小程序中使用iconfont/font-awesome等自定义字体图标 小程序内置图标使用示例 <icon type=&quo ...

  9. 微信小程序 canvas 字体自动换行（支持换行符）

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

随机推荐

  1. int (*a)[10] 和 int *a[10] 的区别

    int *a[10] :指针数组.数组a里存放的是10个int型指针 int (*a)[10] :数组指针.a是指针,指向一个数组.此数组有10个int型元素 int *a[10] 先找到声明符a,然 ...

  2. POJ-3106 Flip and Turn （模拟）

    [题目大意] 给你一个n*m的矩阵,然后给你一系列操作,最后让你输出操作后的矩阵. 操作包括: 1:沿主对角线反转 2:沿副对角线反转 H:上下翻转 V:水平翻转 A B C:顺时针90° 180° ...

  3. 使用VS2015编写驱动时出现的部分错误以及解决方法

    前几日在github上下载了一个Windows驱动的demo,原本想着直接下载下来打开解决方案就可以用,没想到一编译,出现了奇奇怪怪的Error,部分Error网上也没什么好的解决办法,对我这个从未深 ...

  4. ubuntu 执行apt-get update报错Failed to fetch

    在ubuntu下执行sudo apt-get update时,经常会遇到报错: Err http://security.ubuntu.com precise-security InRelease Er ...

  5. CentOS7搭建Maven的Nexus私服仓库

    1.下载nexus 打开一下链接: https://www.sonatype.com/nexus-repository-oss 下载安装包. 2.解压安装包 tar zxvf nexus-3.9.0- ...

  6. hdu2084

    老题目了 #include <stdio.h> int main(){ ][]; int i,j,max; int c,n; scanf("%d",&c); w ...

  7. 【Android】自定义Dialog

    先上图 main.xml主界面文件 <?xml version="1.0" encoding="utf-8"?><LinearLayout x ...

  8. Oracle学习笔记整理手册

    文章目录(1)Oracle正则匹配使用(2)Oracle修改有数据的数据字段类型(3)Oracle表数据回滚语句(4)sql筛选出记录数大于2的记录(5)oracle同义词(6)oracle内外连接( ...

  9. [图论训练]BZOJ 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路【floyd】

    Description     农夫约翰正驾驶一条小艇在牛勒比海上航行．     海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上 ...

  10. 转载： 找不到MSVCR90.dll、Debug vs Release及cppLapack相关

    今天调试程序时出现了,找不到MSCVR90.dll的错误,最好查找到了解决办法,原文链接如下:   http://hi.baidu.com/wpzhao/blog/item/72dc08f77ce9b ...