SVG图标 - 严重垂直对齐

Question

我在按钮中使用SVG图标并且它们严重垂直对齐。当我为他们设置vertical-align: middle时，结果与我设置"bottom"时的结果相同，因此图标太多了。

当我将设置更改为vertical-align: top时，图标会高出1px。如何对齐它们的通用方法是什么？

当然，我可以使用例如vertical-align: top; margin-top: 1px;，但我不想让按钮中的所有图标都按边距定位。

示例：

https://jsfiddle.net/7nhcruw2/2/

Answer 1

尝试以下更改：

.btn .ico {
  display: inline-block;
  width: 18px;
  line-height: 1;
}

.btn svg {
    display: inline-block;
    vertical-align: middle;
    fill: #fff;
}

Here是小提琴。