小程序中使用字体图标

  • • 发表于 2年前
  • • 作者 茂茂
  • • 5456 人浏览
  • • 15 条评论
  • • 最后编辑时间 1年前
  • • 来自 [技 术]

话不多说直接进入正轨,毕竟许久木有发帖子了,哈哈!!!

这方法也是在网上搜索到的

一、下载字体图标

首先进入Iconfont-阿里巴巴矢量图标库 ,然后搜索自己想要的图标
下面以小程序图标为例(我比较懒就直接一张图解决,嘿嘿)

  1. 搜索小程序图标

  2. 点击添加入库

  3. 点击右上角购物车图标

  4. 点击下载代码按钮

下载解压后目录如下:

二、转换ttf文件(重点来了)

  1. 进入transfonter平台,具体操作步骤如下:

下载后文件目录如下,其中重点部分就是stylesheet.css

三、在小程序中使用

  1. 打开stylesheet.css,把里面的所有内容拷贝到app.wxss

  1. 打开先前在Iconfont-阿里巴巴矢量图标库 下载的文件,找到iconfont.css并打开复制如下代码(上面的都不用管,我们只需要带有伪类选择器:before的所有CSS)到app.wxss

注:我这里都是拷贝到app.wxss,你们别都学我直接拷贝(毕竟这里就一个图标),也可以用@import引入
  1. index.wxml中使用,推荐使用text标签然后添加相应的class类名
    使用方式就跟在html中用字体图标一样:通过font-size改变大小,color改变颜色

注:图为最近练手的项目

另外再给自己打广告玩:基于Vue2的在线音乐播放器 还只是个试用版本,最后打赏就不要了,给我点小星星就行,嘿嘿

转载文章 阅读原文

分享到:
评论区(共15条评论)
15条评论
Ctrl+Enter
作者

茂茂

茂茂

APP:2 帖子:16 回复:198 积分:13422

已加入社区[1114]天

啦啦啦

作者详情》
Top