前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件
1：找个其中的ttf格式的文件,然后打开https://transfonter.org/网站
2：点击Add fonts按钮,加载ttf格式的那个文件
3:选择下边的base64 encode改oof为on
4:点击Convert按钮 进行转换
5：转换后点击download下载
6:下载下来后 找到stylesheet.css文件 添加类
.iconfont {

font-family: 'iconfont';

font-weight: 500;

font-style: normal;

}
7:找到我们之前阿里图标文件里面的iconfont.css文件将所有的:before拷贝到stylesheet.css文件中 然后我们就可以使用字体图标了 iconfont icon-mg-hotel

微信小程序如何导入字体图标的更多相关文章

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

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

  2. 微信小程序如何引用iconfont图标

    最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot ...

  3. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  4. 微信小程序Canvas添加水印字体，通过setGlobalAlpha设置字体透明度。

    微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...

  5. 微信小程序设置全局字体

    微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...

  6. 微信小程序 - tabbar动态更换图标以及文字

    大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...

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

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

  8. uni/微信小程序 - 使用外部字体

    字体图标/字体仅支持网络css路径(也就是不支持本地路径) 参考于:https://blog.csdn.net/u013451157/article/details/79825740

  9. 微信小程序开发 导入文件说没找到.json的问题

    这个真的坑爹 网上的答案也没几个靠谱 说白了就是找个空文件直接创建 然后复制粘贴 反应了这玩意ide不成熟 进去之后直接创了个quick start的源码 也就是我们看的这个网页建议我们下载的源码 老 ...

随机推荐

  1. Provinces of China

    https://en.wikipedia.org/wiki/Provinces_of_China#Province

  2. topcoder srm 699 div1 -3

    1.两个长度为$n$的数组$a,b$,$0 \leq a_{i} <2^{30}$.$b_{i}=-1$或者$b_{i}$为除$a_{i}$外其他数字的抑或值.现在给定$b$,如果不存在$a$, ...

  3. 《HTML与CSS 第一章 认识HTML》读书笔记

    一.Web让广播明星黯然失色 要建立Web页面,需要创建用超文本标记语言(HyperText Markup Language,HTML)编写的文件,把它们放在一个Web服务器上 二.Web服务器能做什 ...

  4. Django框架 (七) Django ORM模型

    ORM简介 查询数据层次图解:如果操作mysql,ORM是在pymysq之上又进行了一层封装

  5. Spring Boot 项目初始化

    Spring Boot 项目创建 File->New->New Project->Spring Initializr 勾选 Web Spring Boot 版本选择稳定版,本文选择 ...

  6. centos远程访问

    centos远程访问即windows下的mysql和linux下的mysql能连接,即windows下的navicat能连接到(访问)centos下的mysql中的库表 (centos是linux的一 ...

  7. Docker5之Deploy your app

    Make sure you have published the friendlyhello image you created by pushing it to a registry. We’ll ...

  8. spring与mybatis四种整合方法

    转载: 1.采用数据映射器(MapperFactoryBean)的方式,不用写mybatis映射文件,采用注解方式提供相应的sql语句和输入参数.   (1)Spring配置文件: <!-- 引 ...

  9. spring注解预览

    从Java5.0开始,Java开始支持注解.Spring做为Java生态中的领军框架,从2.5版本后也开始支持注解.相比起之前使用xml来配置Spring框架,使用注解提供了更多的控制Spring框架 ...

  10. js捕获错误

    文: http://www.jb51.net/article/78764.htm 用window.onerror捕获并上报Js错误的方法 前两天有个2048游戏的用户反馈说,打开游戏后不能玩儿,只有一 ...