新生代吗喽
新生代吗喽
  • 发布:2025-01-22 10:50
  • 更新:2026-01-09 18:12
  • 阅读:365

uni-appx 如何使用iconfonts

分类:uni-app x

在uni.scss中引入阿里图标库无法使用
// 引入全局calss
@import url("/static/css/common.scss");

@font-face {
font-family: "iconfont" !important;
src: url("/static/fonts/iconfont.woff") format('woff'),
url("/static/fonts/iconfont.ttf") format('truetype')
}

错误信息:
506| .icon-qiyejichuxinxi:before {
10:35:50.950 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.951 ​
10:35:50.951 505| }
10:35:50.951 506| .icon-qiyejichuxinxi:before {
10:35:50.951 507| content: "\e602";
10:35:50.951 | ^
10:35:50.951 508| }
10:35:50.951 509| .icon-zhinengshipinjiankong:before {
10:35:50.951 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.951 ​
10:35:50.951 508| }
10:35:50.951 509| .icon-zhinengshipinjiankong:before {
10:35:50.951 510| content: "\e601";
10:35:50.951 | ^
10:35:50.951 511| }
10:35:50.951 512| .icon-shebeiguanli:before {
10:35:50.951 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.951 ​
10:35:50.951 511| }
10:35:50.951 512| .icon-shebeiguanli:before {
10:35:50.951 513| content: "\e603";
10:35:50.951 | ^
10:35:50.951 514| }
10:35:50.951 515| .icon-weixianhuaxuepinguanli:before {
10:35:50.951 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.952 ​
10:35:50.952 514| }
10:35:50.952 515| .icon-weixianhuaxuepinguanli:before {
10:35:50.952 516| content: "\e604";
10:35:50.952 | ^
10:35:50.952 517| }
10:35:50.952 518| .icon-shiguyuyingji:before {
10:35:50.952 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.952 ​
10:35:50.952 517| }
10:35:50.952 518| .icon-shiguyuyingji:before {
10:35:50.952 519| content: "\e605";
10:35:50.952 | ^
10:35:50.952 520| }
10:35:50.952 521| .icon-zhiyejiankang:before {
10:35:50.952 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.952 ​
10:35:50.952 520| }
10:35:50.952 521| .icon-zhiyejiankang:before {
10:35:50.952 522| content: "\e606";
10:35:50.952 | ^
10:35:50.952 523| }
10:35:50.952 524| .icon-guanlizhidu:before {
10:35:50.953 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.953 ​
10:35:50.953 523| }
10:35:50.953 524| .icon-guanlizhidu:before {
10:35:50.953 525| content: "\e607";
10:35:50.953 | ^
10:35:50.953 526| }
10:35:50.953 527| .icon-jiaoyupeixun:before {
10:35:50.953 ​[plugin:uni:app-uvue-css] WARNING: content is not a standard property name (may not be supported)​
10:35:50.953 ​
10:35:50.953 526| }
10:35:50.953 527| .icon-jiaoyupeixun:before {
10:35:50.953 528| content: "\e608";
10:35:50.953 | ^
10:35:50.953 529| }

2025-01-22 10:50 负责人:无 分享
已邀请:
9***@qq.com

9***@qq.com

楼主,这个有解决吗,还是说uniappx在app端不能使用iconfont呢

MakeUp

MakeUp

页面中使用的话首先你需要引入加载字体图标ttf文件,我一般使用uni.loadFontFace方法,然后在App.uvue中定义字体图标样式类名:
/ 自定义字体图标样式 /
.custom-text-icon {
font-family: "custom-iconfont";
font-size: 18px;
color: #fe8916;
}
最后在页面中使用text标签搭配字体图标的Unicode编码即可使用:
<text class="custom-text-icon" style="font-size: 16px; color: #666">&#xe608;</text>

要回复问题请先登录注册