【微信小程序-原生开发】添加自定义图标（以使用阿里图标库为例）
方式一 ： 下载svg导入
- 优点：操作方便，支持多彩图标
- 缺点：会增加源代码大小
下载 svg 格式的图标图片，放入源码中使用
小程序项目中的路径为 assets\icon\美食.svg
使用时-代码范例
<image class="imgIcon" src="/assets/icon/美食.svg" />
.imgIcon {height: 60rpx;width: 60rpx;margin-right: 20rpx;
}
方式二 ： 导入wxss
- 优点：不会增加源代码大小
- 缺点：不支持多彩图标，更新比较麻烦
将图标添加到自己的图标项目中后，生成对应的 css 链接
浏览器打开css链接
将其拷贝到小程序项目中新建的文件 assets\icon\icon.wxss 中
@font-face {font-family: "iconfont";/* Project id 1167694 */src: url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff2?t=1681094540417') format('woff2'),url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.woff?t=1681094540417') format('woff'),url('//at.alicdn.com/t/c/font_1167694_c6t4jllqo2b.ttf?t=1681094540417') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-feiji:before {content: "\e8b2";
}.icon-zhuizhuiju:before {content: "\ebdb";
}.icon-lvyou:before {content: "\e618";
}.icon-meishi:before {content: "\fab7";
}.icon-kejian:before {content: "\e630";
}.icon-bukejian:before {content: "\e604";
}
使用时-代码范例
<view class="iconfont icon-meishi"></view>
在页面的 wxss 中，记得导入图标的 wxss 文件
@import "/assets/icon/icon.wxss"
【微信小程序-原生开发】添加自定义图标（以使用阿里图标库为例）相关推荐
- 【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程 效果预览 代码实现 点击触发生成海报 在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
- 微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍 本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
- 微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内可以滚动内容(包括图片) 效果图 这里的遮罩层内容由两张图片构成 底图+内部内容 实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
- 【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
- 【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
- 微信小程序原生开发集成IM服务出现无法找到模块“tim-wx-sdk”的声明文件问题解决
微信小程序原生开发集成IM服务出现无法找到模块"tim-wx-sdk"的声明文件问题解决: 通过npm命令安装配置: 在终端进入到小程序项目根目录执行:npm install 未初 ...
- 【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
- 【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...
- 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
开始前,请先完成项目创建,详见 [微信小程序-原生开发]实用教程01-注册登录账号,获取 AppID.下载安装开发工具.创建项目.上传体验 前期准备 因我们的项目是根据模板创建的,需先清理掉无效的页面 ...
- 【微信小程序-原生开发】watch 的实现
微信小程序-原生开发本身并没有 vue 中 watch 的功能,可以通过以下方式实现 定义监听器 utils\watch.js /*** 设置监听器*/ export function setWatc ...
最新文章
- 编写递归下降语法分析器_面试BAT必问的JVM，今天我们来说一说它类加载器的底层原理...
- 26. linix脚本启动java程序
- 横线-文字-横线的html-css布局
- CodeForces - 165E Compatible Numbers(SOSdp)
- oracle xe 最大连接数,解决Oracle XE报错ORA-12516（Oracle回话数超出限制）
- q learning 参数_Soft Q-Learning论文阅读笔记
- Python 中的map和reduce学习笔记
- html5移动端单视频播放代码,js移动端视频播放代码
- 科学计算机算ph,科学计算器TechCalc v4.8.0特别高级会员版
- Redis 下载安装教程 及 客户端可视化工具
- JavaScript模拟出一个input用于添加本地文件
- 阿拉丁年会 - 小程序开发者年度盛会 报告内容摘要
- Mysql 分组查询top n(多种方法)
- 计算机毕业设计SSM鞍山丘比特房屋租赁管理系统【附源码数据库】
- 【SwiftUI学习笔记】Git Repository Creation FailedEnsure the author information supplied in Xcode ...
- 戴尔燃7000笔记本充不进去电，开机提示Alert!，点Continue进去后电脑变卡的解决方案。
- python添加文字水印中间旋转45度,Python添加pdf水印
- 看了下大厂程序员的工资表，我酸了.....
- java汇编工具使用
- 深度学习网络结构大全