小程序图标换行问题|text标签与i标签

初学uni-app，完了，初学就踩到坑了。同样的样式设置，H5端和微信小程序端出现了不一样的显示，如图

-图片分割---------------------------------------------------------------------------------------------------------------------------------------------

可以发现，微信小程序端出现了换行情况，而H5端则没有，经过排错，我发现了盲点

我的代码是这样的

<template>
	<view class="music-head">
		<view class="icon-class">
			<i class="iconfont icon-zuojiantou"></i>| <i class="iconfont icon-shouye"></i>
		</view>
		<view>{{title}}</view>
	</view>
</template>

<style scoped>
	@import url("@/common/iconfont.css");
	.music-head {
		width: 100%;
		height: 75px;
		line-height: 80px;
		text-align: center;
		position: relative;
	}
	.icon-class {
		position: absolute;
	}
</style>

关键问题就出在了这个显示图标的i标签上，而当我把i标签换成text标签，问题解决，显示效果如下

图片分割-----------------------------------------------------------------------------------------------------------------------------------