Bootstrap 4 结合 Font Awesome 使用时按钮大小不一致问题

我之前也碰到过完全一样的麻烦！你说得没错，问题根源就是不同Font Awesome图标的固有尺寸差异——有些图标视觉上更宽，有些更窄，放进Bootstrap的按钮里后，按钮会自适应内容宽度，导致整组按钮大小参差不齐。

给你几个实用的解决办法，按便捷程度排序：

1. 用Font Awesome自带的固定宽度类（最省事） #

Font Awesome本身提供了fa-fw（fixed width）类，专门用来统一图标的宽度，直接给图标加上这个类就行：

<a class="btn btn-outline-warning" type="button" href="#">
  <i class="fa fa-edit fa-fw"></i>
</a>
<a class="btn btn-outline-danger" type="button" href="#">
  <i class="fa fa-trash fa-fw"></i>
</a>

这个类会给所有图标设置一个统一的水平宽度，不管图标本身设计有多宽，都会占据相同的空间，按钮自然就尺寸一致了。

2. 自定义CSS固定图标容器尺寸 #

如果需要更灵活的控制，可以给图标加一个自定义类，手动设置宽高和居中对齐：

/* 自定义图标容器样式 */
.btn-icon {
  display: inline-block;
  width: 1.5em; /* 根据你的按钮大小调整 */
  height: 1.5em;
  text-align: center;
}

然后在按钮里的图标上应用这个类：

<a class="btn btn-outline-warning" type="button" href="#">
  <i class="fa fa-edit btn-icon"></i>
</a>
<a class="btn btn-outline-danger" type="button" href="#">
  <i class="fa fa-times btn-icon"></i>
</a>

这种方法适合需要精准控制图标大小和间距的场景。

3. 给按钮设置固定宽度 #

如果你的按钮不需要自适应内容，也可以直接给Bootstrap按钮加固定宽度类，比如w-25、w-50或者自定义宽度：

<a class="btn btn-outline-warning w-25" type="button" href="#">
  <i class="fa fa-edit"></i>
</a>
<a class="btn btn-outline-danger w-25" type="button" href="#">
  <i class="fa fa-trash"></i>
</a>

不过这种方法灵活性较差，适合按钮数量少、布局固定的场景。

补充说明 #

之所以会出现这个问题，是因为Font Awesome的图标都是独立的矢量图形，每个图标的路径设计不同——比如fa-edit的笔形图标比fa-times的叉形图标要宽一些，按钮的宽度默认是由内部内容撑开的，所以就出现了尺寸不一致的情况。只要让所有图标占据的空间统一，按钮的尺寸自然就对齐了。

内容的提问来源于stack exchange，提问作者Med Karim Garali