如何防止Bootstrap按钮中的FontAwesome图标单独换行

嘿，这个问题我太懂了！之前做项目时也碰到过Bootstrap按钮里图标单独换行的糟心事，不用额外<span>标签的纯CSS方案确实有，给你两个实用思路：

方案一：用FontAwesome伪元素替代HTML图标（纯CSS，几乎不用改HTML） #

这个方法的核心是把图标从HTML移到CSS伪元素里，让最后一个单词和图标之间没有可换行的空格，浏览器自然不会把它们拆分到两行。

首先把HTML里的<i>图标标签删掉，然后给按钮加个自定义类（比如btn-with-icon），再用CSS插入图标：

/* 保持按钮原有换行行为，允许文本正常换行 */
.btn-with-icon {
  white-space: normal;
}

/* 用伪元素插入FontAwesome图标 */
.btn-with-icon::after {
  /* 替换成你需要的图标Unicode，这里是右箭头的编码 */
  content: "\f061";
  /* 对应FontAwesome的字体族，免费版用这个，Pro版要换对应字体 */
  font-family: "Font Awesome 5 Free";
  /* solid风格图标需要设置900字重，regular风格是400 */
  font-weight: 900;
  /* 模拟原有的间距，和原代码的ml-1对应 */
  margin-left: 0.25rem;
  /* 确保图标和前面的文本绝不换行拆分 */
  white-space: nowrap;
}

修改后的HTML：

<a href="#" class="btn btn-light btn-with-icon">One two three</a>

这样调整后，当容器变窄时，只会在单词之间（比如two和three之间）换行，three和图标会始终绑定在一起，完美解决单独换行的问题。

方案二：用Flex布局调整按钮内部排版（完全不用改HTML） #

如果不想动HTML里的图标标签，可以用Flex布局来控制按钮内元素的换行逻辑，强制图标和最后一个单词一起换行：

给按钮加个自定义类（比如btn-icon-no-wrap），然后写CSS：

.btn-icon-no-wrap {
  /* 把按钮改成inline-flex布局，允许内部元素换行 */
  display: inline-flex;
  flex-wrap: wrap;
  /* 让内容垂直居中，保持Bootstrap按钮的原有样式 */
  align-items: center;
  /* 控制单词和图标之间的间距，替代原有的ml-1 */
  gap: 0.25rem;
}

/* 让图标成为不可收缩的项，确保它和前面的单词一起换行 */
.btn-icon-no-wrap > i {
  flex-shrink: 0;
}

原HTML直接用这个类就行：

<a href="#" class="btn btn-light btn-icon-no-wrap">One two three <i class="fa fa-arrow-right"></i></a>

这个方案利用Flex的flex-shrink: 0让图标不会被单独挤到下一行，当容器空间不足时，会自动把最后一个单词和图标作为整体换到下一行。

内容的提问来源于stack exchange，提问作者MrUpsidown