微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网,
搜索目标图标,图标类型为“单色图标”
将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
打开目标项目,下载代码至本地(另外:下载Unicode格式)
将下载的文件进行解压,解压后得到如图所示文件
打开iconfont.css文件,删除文件中src属性的内容
回到iconfont网站,点击复制代码
将复制的代码写进@font-face中并保存,如图:
在小程序项目文件中建一个新的文件夹,命名为iconfont;
将
iconfont.css
文件放入iconfont
文件夹下,并将iconfont.css
文件更名为iconfont.wxss
在小程序app.wxss中引入iconfont.wxss,如图:
在页面中使用
wxml部分代码如下:
<text class="iconfont icon-图标名"></text>
或者
<i class="iconfont icon-图标名"></i>
eg:<i class="iconfont icon-kache"></i>
最终效果如图
修改图标颜色,wxss部分代码如下:
<text class="iconfont icon-图标名" style="color: red;"></text>
效果图:
- 修改图标大小
<text class="iconfont icon-图标名" style="font-size:30px;"></text>
微信小程序引入iconfont单色图标实例(Unicode方式)相关推荐
- 微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 打开目标项目,下 ...
- 微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...
- 微信小程序引入iconfont字体图标(阿里巴巴矢量图标库)
微信小程序怎么引入iconfont字体图标 由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图 标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
- 微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
- 微信小程序引入iconfont图标,解决渲染层失败(2022年7月11日)
前言 网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接,可惜现在阿里现在已经没有在线链接了. 解决方法 然后我吧文件下载到本地尝试引用,抱歉woff文件识别不了,微信小程序是没法直接识别woff ...
- 微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
- 微信小程序引入外部矢量图标(阿里巴巴矢量图标)
1.显示效果 2.实现步骤 进入阿里巴巴矢量图标库 搜索想要的矢量图标并加入购物车,点击右上角购物车 将图标添加至项目 更改项目设置 将字体格式设置为TTF Base64 点击下载至本地 在微信小程序 ...
- 微信小程序引入阿里巴巴彩色图标字体(Symbol)
步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...
- 解决微信小程序引入iconfont,彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色 这是引入小程序内的显示 这是在iconfont上的图标 我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...
最新文章
- 干货 | 要怎样和程序猿谈一场没有bug的恋爱
- mysql数据类型所占空间大小
- boost::depth_first_search用法的测试程序
- 实例讲解如何通过Oracle成功发送邮件-入门基础
- matlab仿真环境,高低温环境模拟系统MATLAB仿真研究
- 玩转oracle 11g(35):rman备份-参数文件spfile损坏恢复
- 图书馆如何应用视频直播?
- 以太坊智能合约Java_以太坊:调用已部署的智能合约
- zabbix如何监控linux磁盘性能IO
- 安装驱动省心办法:驱动总裁
- 手机CAD如何快速看图下载?
- 专业测试油耗的软件,油耗软件app哪个好_检测汽车油耗的软件_油耗记录软件车机版...
- Cernet_IPv6机考
- 关于ABAQUS2020二次开发
- SQL Server 2008 中文企业版下载
- R包的安装以及安装失败的解决
- 计算机中的ping是什么情况,Ping值是什么意思?影响因素有哪些?
- POJ 最小公倍数
- 2018传智黑马前端视频教程36期视频与源码完整版
- Cocos合成大西瓜案例-下