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

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. H.264编码profile & level控制

    背景知识 先科普一下profile&level.(这里讨论最常用的H264) H.264有四种画质级别,分别是baseline, extended, main, high:  1.Baseli ...

  2. 如何在JS中应用正则表达式

    背景:在之前的随笔中写过C#中如何使用正则表达式,这篇随笔主要讲如何在js中应用正则表达式 如下代码: $("#zhengze").click(function () { var ...

  3. sso简单原理及实现

    转自:http://www.cnblogs.com/ywlaker/ 一.单系统登录机制 1.http无状态协议 web应用采用browser/server架构,http作为通信协议.http是无状态 ...

  4. CF Educational Codeforces Round 21

    A. Lucky Year time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  5. 【Kubernetes】Deployment控制器模型

    在Kubernetes中,Deployment是最基本的控制器对象 apiVersion: apps/v1 kind: Deployment metadata: name: nginx-deploym ...

  6. 洛谷P3312 - [SDOI2014]数表

    Portal Solution 共\(T(T\leq2\times10^4)\)组测试数据.给出\(n,m(n,m\leq10^5),a(a\leq10^9)\),求\[ \sum_{i=1}^n\s ...

  7. 【（最小权点基）tarjan强连通分量缩点+tarjan模板】HDU 5934 Bomb

    [AC] #include<bits/stdc++.h> using namespace std; typedef long long ll; int n; ; ; const int i ...

  8. C++ 中头文件（.h）和源文件（.cc）的写法简述

    用C++编写比较大型的项目时,文件的分割管理确实确实是非常必要的 .下面就非常简洁明了地谈谈头文件(.h)和源文件(.cc)应该怎么写. 头文件(.h):写类的声明(包括类里面的成员和方法的声明).函 ...

  9. uva 10870 递推关系矩阵快速幂模

    Recurrences Input: standard input Output: standard output Consider recurrent functions of the follow ...

  10. POJ3345 Bribing FIPA

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5021   Accepted: 1574 Description There ...