微信小程序使用iconfont在线icon

微信小程序可以使用外部icon，比较常用的就是iconfont，可以搜索想要的icon和选择想要的颜色然后png下载，然后放到小程序的images文件夹里本地使用。

为了节省空间，也可以在线使用

在iconfont官网中我的页面创建一个自己的项目

然后回到首页，搜索自己想要的icon

选择喜欢的一个，点击购物车 图标，添加入库

点击右上角的 购物车

点击添加至项目

选择第一步创建的那个项目

来到我的项目

可以根据自己的习惯改变icon名字

点击查看在线链接

如果是第一次查看的话，会显示暂无代码，点击生成，如果不是第一次，则会显示更新代码

然后点击链接，进入到css页面。将页面的所有内容复制，到项目的根目录下新建一个iconfont.wxss文件，将内容复制进去。

然后在app.wxss中导入

将 font-family: "iconfont" !important; 改成 font-family: "icon" !important;

接下来就可以使用啦
这里可以改变icon的大小，但是所有的都会统一

通过view调用，可以直接在view上改变大小，使用font-size属性

<view class="iconfont icon-usermsg" style="font-size: 38px;" />

也可通过vant组件调用，使用size属性更改大小，color属性可以直接更改想要的颜色

<van-icon class="iconfont" class-prefix="icon" name="usermsg" size="38px" color="red"/>

微信小程序使用iconfont在线icon相关推荐

微信小程序调用科大讯飞在线合成语音接口（文字转语音）
科大讯飞在线文档 https://www.xfyun.cn/doc/tts/online_tts/API.html 科大讯飞调用接口地址 https://blog.csdn.net/jinxi111 ...
微信小程序商城怎么在线制作
今天珍奶bb给大家简单唠唠微信小程序商城怎么在线制作的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接 ...
微信小程序增加悬浮在线客服
例如在index首页增加客服代码及一键拨打电话 1.index.wxss或者app.wxss文件里增加样式 .img-plus-style { height: 70rpx; width: 70rpx; ...
解决微信小程序引入iconfont，彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...
微信小程序使用iconfont阿里矢量多色图标
引用使用方法: 引用方法名支持多色兼容性 unicode ❌ 好 font-class ❌ 良好 symbol ✔ 差虽然unicode和font-class很好,但你会发现都不支持多色模式, ...
微信小程序 WebSocket 通信 —— 在线聊天
在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的We ...
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台微信小程序支付宝小程序百度小程序头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
微信小程序引入iconfont
微信小程序如何引用阿里iconfont图标库? 1.进入阿里iconfont官网 https://www.iconfont.cn/:新建一个自己的项目,导入自己需要的icon. 2.将项目里的icon ...
微信小程序文件下载及在线打开指定文档，解压Zip格式压缩包
1.微信小程序文件下载 wx.downloadFile({url:'https://www.baidu.com/test', //(仅为示例接口,注:这里的域名需要到小程序公众平台添加)filePat ...
springboot+微信小程序“微印象”在线打印预约系统的设计与实现毕业设计源码061642
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微印象在线打印预约小程序被用户普遍使用,为方 ...

微信小程序使用iconfont在线icon

微信小程序使用iconfont在线icon相关推荐

最新文章

热门文章