微信小程序如何导入字体图标
前提:我们已经拥有了从阿里图标库下载下来的一系列的字体图标文件
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
微信小程序如何导入字体图标的更多相关文章
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 微信小程序如何引用iconfont图标
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot ...
- 微信小程序引用阿里巴巴矢量图标iconfont
最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...
- 微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...
- 微信小程序设置全局字体
微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...
- 微信小程序 - tabbar动态更换图标以及文字
大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...
- 在微信小程序中使用阿里图标库Iconfont
首先想要使用图标,只用上图的五个iconfont相关文件就可以了.(下下来的文件iconfont.wxss开始是.css的后缀,手动改成.wxss就可以在小程序中使用) 然后在app.wxss中引入i ...
- uni/微信小程序 - 使用外部字体
字体图标/字体仅支持网络css路径(也就是不支持本地路径) 参考于:https://blog.csdn.net/u013451157/article/details/79825740
- 微信小程序开发 导入文件说没找到.json的问题
这个真的坑爹 网上的答案也没几个靠谱 说白了就是找个空文件直接创建 然后复制粘贴 反应了这玩意ide不成熟 进去之后直接创了个quick start的源码 也就是我们看的这个网页建议我们下载的源码 老 ...
随机推荐
- springmvc配置文件<context:component-scan>
在spring.xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的 ...
- Python3 tkinter基础 LabelFrame StringVar 单击按钮,Label中显示的文字更换
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- Python 正则表达式学习
摘要 在正则表达式中,如果直接给出字符,就是精确匹配. {m,n}? 对于前一个字符重复 m到 n 次,并且取尽可能少的情况 在字符串'aaaaaa'中,a{2,4} 会匹配 4 个 a,但 a{2, ...
- CentOS 源码编译安装 Python3
准备 yum -y install wget gcc make libffi-devel zlib-devel readline-devel bzip2-devel ncurses-devel sql ...
- 集训总结DAY.1(18.5.22)——KMP
DAY 1——5.22 in the morning 依稀记得我们有一场contest. at night chf大佬讲KMP,先膜一波~~~ luoguP3375KMP模板题 KMP算法,又称模式匹 ...
- p2596 书架(Treap)
写平衡树修锅快修到死系列 我太蠢了 其实是平衡树裸体裸题 插入,删除,交换前驱或后继,查询rank和kth 维护一个pos数组,表示第i个书的编号 然后注意许许多多的细节,没了 #include &l ...
- ES6中的函数和数组补漏
对象的函数解构 我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理.ES6就为我们提供了这样的解构赋值. let json ...
- propsData 选项 全局扩展的数据传递
propsData 不是和属性有关,他用在全局扩展时进行传递数据,结合自定义属性获取属性值的props一起使用 html <div id="app"> <regi ...
- localhost 和 127.0.0.1 有什么区别?
另外,主要是好友为什么两个一个有 favicon 一个没有? 127.0.0.1和localhost_180104074532.png
- Jquery loading 效果
function showLoad(tipInfo) { var eTip = document.createElement('div'); eTip.setAttribute('id', 'tipD ...