微信小程序线上加载使用iconfont问题

1.在微信小程序根目录下创建style文件夹,里面再创建iconfont文件夹,用于放置iconfont图标文件和iconfont样式文件

2.给iconfont.wxss写样式(也可以下载iconfont代码,拷贝iconfont.css里的代码复制进去)

css 复制代码
@font-face {
  font-family: "iconfont"; /* Project id 4251914 */
  src: url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.woff2?t=1694676186559') format('woff2'),
  url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.woff?t=1694676186559') format('woff'),
  url('//at.alicdn.com/t/c/font_4251914_74nkylmquia.ttf?t=1694676186559') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shanchu:before {
  content: "\e74b";
}

.icon-shezhi:before {
  content: "\e74c";
}

.icon-shouyefill:before {
  content: "\e750";
}

.icon-shouye:before {
  content: "\e751";
}

.icon-zuobiao:before {
  content: "\e769";
}

.icon-xiangyou1:before {
  content: "\e775";
}

.icon-xiangzuo1:before {
  content: "\e779";
}

.icon-xiangji1fill:before {
  content: "\e77e";
}

.icon-xiangji1:before {
  content: "\e77f";
}

.icon-yonghufill:before {
  content: "\e787";
}

.icon-yonghu:before {
  content: "\e788";
}

3.点击更新(生成代码)

4.复制线上链接到iconfont.wxss中,使用和

5.把iconfont引入微信小程序(在app.wxss)

6.iconfont在页面中的使用

html 复制代码
<icon class="iconfont icon-followed"></icon>

ps:线下使用icon链接:解决微信小程序离线加载iconfont问题_微信小程序离线使用_theOtherSky的博客-CSDN博客

相关推荐
毛毛三由4 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖6 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设7 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru8 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉10 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊13 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
铲子Zzz1 天前
Java使用接口AES进行加密+微信小程序接收解密
java·开发语言·微信小程序
paopaokaka_luck1 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所1 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序