前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件
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. 取球游戏|2012年蓝桥杯B组题解析第十题-fishers

    (25')取球游戏 今盒子里有n个小球,A.B两人轮流从盒中取球,每个人都可以看到另一个人取了多少个,也可以看到盒中还剩下多少个,并且两人都很聪明,不会做出错误的判断. 我们约定: 每个人从盒子中取出 ...

  2. 【做题】spoj4060 A game with probability——dp

    赛前做题时忽然发现自己概率博弈类dp很弱,心好慌.(获胜概率或最优解期望) 于是就做了这道题,续了特别久. 一开始列dp式子的时候就花了很长时间,首先搞错了两次,然后忘记了根据上一轮dp值直接确定选什 ...

  3. wqCms6.0在IIS6的Getshell

    2017-02-15发布 一.漏洞利用点 漏洞文件:admin_UploadDataHandler.ashx 自定义构造上传点 二.hack it 三.POC <html> <bod ...

  4. python 之 条件语句

    python 编程语言指定任何非0和非空(null)值为true, 0或者null为false. python 编程中if语句用于控制程序的执行,基本形式为: if 判断条件: 执行语句…… else ...

  5. BZOJ2956: 模积和

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  6. C# winfrom 通过代码 删除TableLayoutPanel控件的一行或列

    tableLayoutPanel1.ColumnStyles.RemoveAt(1);                tableLayoutPanel1.Controls.RemoveAt(1);

  7. Latex: 解决 The gutter between columns is x inches wide (on page x), but should be at least 0.2 inches. 问题

    参考: Sample_WCCI.tex Latex: 解决 The gutter between columns is x inches wide (on page x), but should be ...

  8. nsswitch & pam

    nsswitch & pam nsswitch是名称解析框架服务,pam是认证框架服务 对主机来说,有两个功能可能用到框架性服务 1.名称解析: name: id 2.认证服务:验证当前请求获 ...

  9. ASP.NET —— Web Pages

    为简单起见,新建一个空的web工程,再新建一个MVC的视图(.cshtml),因为WP是单页面模型,所以以后就在这个页面中进行试验. Razor语法简介: 变量可用var或者其确切类型声明. 遍历fo ...

  10. Oracle 11G Client客户端安装

    参考资料: http://www.cnblogs.com/jiguixin/archive/2011/09/09/2172672.html http://blog.csdn.net/lanchengx ...