一、下载字体图标
首先进入 ,然后搜索自己想要的图标 下面以小程序图标为例(我比较懒就直接一张图解决,嘿嘿)
-
搜索
小程序
图标 -
点击
添加入库
-
点击右上角
购物车
图标 -
点击
下载代码
按钮
下载解压后目录如下:
二、转换ttf文件(重点来了)
- 进入平台,具体操作步骤如下:
下载后文件目录如下,其中重点部分就是stylesheet.css
三、在小程序中使用
- 打开
stylesheet.css
,把里面的所有内容拷贝到app.wxss
- 打开先前在 下载的文件,找到
iconfont.css
并打开复制如下代码(上面的都不用管,我们只需要带有伪类选择器:before
的所有CSS)到app.wxss
注:我这里都是拷贝到app.wxss
,你们别都学我直接拷贝(毕竟这里就一个图标),也可以用@import
引入
- 在
index.wxml
中使用,推荐使用text
标签然后添加相应的class
类名 使用方式就跟在html
中用字体图标一样:通过font-size
改变大小,color
改变颜色
注:图为练手小程序,如果你想看播放器还是看这里吧