如何在微信小程序中使用iconfont

一.在iconfont中找到自己需要的图标并加入创建的项目中
iconfont网址链接:https://www.iconfont.cn

我项目中添加的图标

二、点击下载至本地

下载的文件

三、对下载好的文件进行解压,更改名称,并将文件复制到项目文件中

1.文件夹命名为fonts,名称可取任意
2.删除的demo.cssdemo.html为官网使用文档,可以根据需要进行删除
3.将iconfont.css改为iconfont.wxss,小程序中css样式文件后缀为wxss
4.将fonts文件夹放在assets下(放置位置依据个人习惯)

更改文件过程

fonts位置

四、在页面中进行引入使用iconfont

1.在使用界面wxss引入样式表fonts/iconfont.wxss

index.wxss界面

@import '/assets/fonts/iconfont.wxss';

2.在index.wxml页面中使用

  <icon class="iconfont iconshangyishou"  ></icon>

iconfont必须要写 ;
iconshangyishou是样式名称
样式名称可在iconfont我的项目中复制代码获取

获取样式名称

五、修改样式名称

打开fonts/iconfont.wxss,找到需要修改样式的图标名称替换为新的名称icontext
此处以iconshangyishou为例,将样式名称修改为icontext

更换名称操作
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. 使用GitHub或其他账号登录iconfont,将我们需要的字体添加购物车,然后再添加到新建的项目中。 2....
    北溟有渔夫阅读 28,551评论 9 37
  • 众所周知, 小程序的有一个1M大小的限制. 而优美的界面离不了各种图形. 如果将这些图形集成到小程序中. 其臃肿的...
    achar阅读 5,518评论 0 10
  • 前言 在微信小程序中使用iconfont,总体来说可以分为两步1:生成iconfont代码2:在小程序中引入ico...
    鱼放放阅读 885评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,847评论 1 45
  • 新学期开始啦!原班主任岳老师受伤请假,我全权接手班级,班主任、副班主任一人兼。最最明显的效果就是嗓子哑了,腿脚不停...
    我是张老师阅读 438评论 2 2

友情链接更多精彩内容