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

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. shell-note-1-基础篇

    1. Shell is a program written in C. It provides an interface for users to access to the service of o ...

  2. Educational Codeforces Round 31- D. Boxes And Balls

    D. Boxes And Balls time limit per test2 seconds memory limit per test256 megabytes 题目链接:http://codef ...

  3. 俯瞰spring

    [简化Java开发] 基于POJO的轻量级和最小入侵性编程: 通过依赖注入和面向接口实现松耦合: 基于切面和惯例进行声明式编程: 通过切面和模板减少样板代码: [容纳你的bean] 容器是spring ...

  4. .NET:权限管理

    题外话: 临近大四,编写各种简历的时候发现,很多电子简历上是可以链上自己在各大论坛上留下的足迹.关于这点,学习网络,拥抱开源,具有互联网思维的博主很后悔,后悔当年只会在网上查资料,不会留资料,空有才能 ...

  5. luogu2526 [SHOI2001]小狗散步

    注意一个景点只能去一次. #include <iostream> #include <cstring> #include <cstdio> #include < ...

  6. IOS UITest 初始化 ViewController

    import XCTest @testable import UITestDemo class UITestDemoTests: XCTestCase { var homevc:HomeViewCon ...

  7. pytorch中torch.unsqueeze()函数与np.expand_dims()

    numpy.expand_dims(a, axis) Expand the shape of an array. Insert a new axis that will appear at the a ...

  8. tab栏切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 关于JS正则表达式

    去除所有P标签 content=content.replace(/<([\/]?)(p)((:?\s*)(:?[^>]*)(:?\s*))>/g, ''); 将所有的  1.     ...

  10. BZOJ1923 [Sdoi2010]外星千足虫 【高斯消元】

    题目 输入格式 第一行是两个正整数 N, M. 接下来 M行,按顺序给出 Charles 这M次使用"点足机"的统计结果.每行 包含一个"01"串和一个数字,用 ...