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

CSS - 按钮内的定位图标

2 个答案: