CSS-在按钮内定位图标

Question

我正在尝试在按钮内添加图标。问题是，每当我添加图标时，它都会更改按钮的形状（根据图标的大小，它会变高，有时会变宽），并且按钮的文本未对齐，因此没有不再居中，而是将文本下推。

 <button>
   <i class="material-icons">weekend</i>
   Test
 </button>

和CSS：

i {
    color: #669FAB;
    font-size: 24px !important;
 }

 button {
    min-width: 100px;
 }

https://jsfiddle.net/uxs71ymz/1/

我希望图标向左移动，同时使文本保持在按钮内的中心位置。

Answer 1

嗨，这是CSS代码

的CSS

i {
  color: #669FAB;
  font-size: 24px !important;
  vertical-align:middle;
}

button {
  min-width: 100px;
}

希望这可以帮助..