iconfont-阿里巴巴矢量图标在界面中无法正常显示,表现为一个方块。

解决办法:
一般出现这种问题多是由于引用的不规范导致的。
1、引入iconfont.css,确保路径正确。
2、引入iconfont.tff。
3、在body内输入图标代码,如:

<span class="mui-icon icon iconfont icon-tianjia">span>

注意:
①在iconfont.css内,要输入正确的iconfont.tff引用路径,如:

@font-face {
	font-family: "iconfont"; /* Project id  */
	src: url('../fonts/iconfont.ttf?t=1649488639463') format('truetype');
}

②在iconfont.css内,要存着与图标保持一致的content,如:

.icon-31wode:before {
	content: "\f01d8";
}

③图标的content信息与t=1649488639463信息要保持一致。


原图:
在这里插入图片描述
现图:
在这里插入图片描述

你可能感兴趣的:(工具,经验分享,学习,前端)