前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件
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. 【Dalston】【第七章】分布式链路跟踪(Sleuth)

    当我们进行微服务架构开发时,通常会根据业务来划分微服务,各业务之间通过REST进行调用.一个用户操作,可能需要很多微服务的协同才能完成,如果在业务调用链路上任何一个微服务出现问题或者网络超时,都会导致 ...

  2. js动画（速度）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  3. 怎么用mybatis

    一般mybatis的用法.mapper-spring-boot-starter  + PageHelper分页插件. 1,PageHelper分页插件 . https://blog.csdn.net/ ...

  4. java 偏向锁,轻量锁,重量级锁

    synchronized的执行过程: 1. 检测Mark Word里面是不是当前线程的ID,如果是,表示当前线程处于偏向锁 2. 如果不是,则使用CAS将当前线程的ID替换Mard Word,如果成功 ...

  5. Kylin——CDH

    CDH:Cloudera‘s Distribution,including Apache Hadoop. Hadoop众多分支中的一种,可直接用于成产环境 CM:Cloudera Manager

  6. 批处理bat标准化获取当前系统日期的几种方法，补0

    首先有两个推荐的方案. 一: for /f "tokens=2 delims==" %%a in ('wmic path win32_operatingsystem get Loc ...

  7. 51nod 1349 最大值（单调栈）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1349 题意: 求区间内最大值大于等于k的区间个数. 思路: 利用求出对于 ...

  8. Spring依赖

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  9. CPU核数和load average的关系

    在前面的文章<Linux系统监控——top命令>中我简单提到了,判断load average的数值到底大不大的判断依据,就是数值除以CPU核数,大于5,就说明超负荷运转了.——这里其实不太 ...

  10. c代码，输出i,j,k互不相同的三位数

    #include <stdio.h> int main() { int i,j,k; printf("\n"); for(i=1;i<5;i++){ for(j= ...