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

希望这有帮助..

Answer 2

https://jsfiddle.net/hq9t8rk4/

button i.material-icons {
  color: #669FAB;
  font-size: 24px;
  // Add the below
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}
button {
  min-width: 100px;
  // Add the below
  position: relative;
  padding: 3px 50px;
  line-height: 24px;
  text-align: center;
}