Chrome上的字体真棒堆叠图标对齐问题

Question

在屏幕快照中，数字9和2的图标是堆叠的字体图标。 我正在使用vuetify作为我的前端框架

在Firefox上，我的图标显示正确，并且与其他图标显示在同一行。

但是在Chrome和Safari中，它们并没有对齐

我尝试设置display: inline ，但是堆叠的图标过高。

我的按钮代码是

<v-btn icon
    v-on="data.on">
    <span class="fa-stack fa-3x"></span>
    <v-icon color="green">fas fa-circle fa-stack-2x</v-icon>
    <strong class="fa-stack-1x text-primary">{{count}}</strong>
</v-btn>

如何使这些图标与Chrome和其他浏览器的按键图标对齐？

Answer 1

因此，看起来字体超棒的堆栈跨度增加了2em高度，这既不会影响Firefox，又会影响Chrome。 将高度覆盖为0em可解决此问题。