博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序中使用字体图标
阅读量:7218 次
发布时间:2019-06-29

本文共 509 字,大约阅读时间需要 1 分钟。

一、下载字体图标

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

  1. 搜索小程序图标

  2. 点击添加入库

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

  4. 点击下载代码按钮

下载解压后目录如下:

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

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

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

三、在小程序中使用

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

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

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

注:图为练手小程序,如果你想看播放器还是看这里吧

转载于:https://juejin.im/post/5b712160f265da27ea319f2b

你可能感兴趣的文章
Indexes
查看>>
2.Web中使用iReport 整合----------创建html格式的
查看>>
异常备忘:java.lang.UnsupportedClassVersionError: Bad version number in .class file
查看>>
最全三大框架整合(使用映射)——applicationContext.xml里面的配置
查看>>
初步理解Java的三大特性——封装、继承和多态
查看>>
知识点积累(一)
查看>>
iphone-common-codes-ccteam源代码 CCFile.m
查看>>
python:浅析python 中__name__ = '__main__' 的作用
查看>>
修改tomcat端口后不能IP访问问题
查看>>
review board
查看>>
URAL 1495 One-two, One-two 2
查看>>
牛客国庆集训派对Day3 G Stones
查看>>
虚函数简单总结
查看>>
插入排序--算法导论
查看>>
NoSQL -- Redis使用
查看>>
处理iphone的 .play() 不能播放问题
查看>>
jetty404web界面服务器信息隐藏
查看>>
22个Photoshop网页设计教程网站推荐
查看>>
如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI
查看>>
centos7 python2和python3共存
查看>>