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;
}

希望这对您有帮助..