span和img标签垂直对齐在ipad上不起作用

使用vertical-align:middle使span和img垂直对齐，不生效。
这个是在谷歌浏览器上的显示（如下）

在真机测试：ipad上没有垂直对齐（效果如下）

代码如下：
html：

css：

琢磨了好久找不到原因，求问各位大佬们为什么会这样子呢？如果要icon和文字垂直居中该怎么办？用过flex在iPad上也不行，在谷歌模拟和安卓机都很正常。