解决导航栏字体图标渲染导致字体图标旁边文本闪烁问题
腾讯视频是用的这种方案

css
.nav-item-wrap {
display: flex;
align-items: center;
direction: rtl;
}
.text {
position: relative;
margin-left: 5px;
white-space: nowrap;
display: flex;
align-items: center;
}
.icon {
height: 20px;
width: 20px;
position: relative;
flex-shrink: 0;
}
.icon i {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 2.5px;
}
html
<li><a href="index.html"><img src="images/logo.png"></a></li>
<li>
<a href="index.html">
<div class="nav-item-wrap">
<div class="text">主页</div>
<div class="icon"><i class="fas fa-home"></i></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-item-wrap">
<div class="text">非遗项目</div>
<div class="icon"><i class="fas fa-theater-masks"></i></div>
</div>
</a>
</li>