Bootstrap 4 与 Font Awesome 的兼容性答案

【问题标题】：Bootstrap 4 compatibility with Font AwesomeBootstrap 4 与 Font Awesome 的兼容性
【发布时间】：2018-01-22 16:01:51
【问题描述】：

Bootstrap 4 能否与 Font Awesome 配合使用？

Bootstrap 4 刚刚进入测试版，我担心 Font Awesome 甚至没有在 Bootstrap's official "preferred icon set" page 中列出。

【问题讨论】：

【解决方案1】：

Font Awesome 完全独立于 Bootstrap 框架，并且应该在其组件中正常运行而不会出现问题。 Bootstrap 4 似乎偏爱基于 SVG 的图标解决方案，这可能是 Font Awesome 不在其首选图标解决方案列表中的原因。

话虽如此 - Font Awesome 5 目前处于 Beta 2 中，截至 2017 年 8 月 15 日。它支持 SVG 图标，因此如果这对您很重要，它可能是一个可以考虑的选项。不过我会注意到； Font Awesome 5 是一项优质服务。

【讨论】：

【解决方案2】：

在 Bootstrap 2.x.x 中，Glyphyicons 是图像格式，因此您无法轻松增加大小、更改颜色、背景颜色等。但是，font-awesome 为您提供了可立即自定义的可缩放矢量图标——大小、颜色、阴影以及任何可以通过 CSS 的强大功能完成的事情。

Font-awesome 确实是 Glyphyicons 的替代品，它会不时更新新图标。 Fat 和 Mdo 计划将 Font-awesome 集成到 bootstrap 版本 3 中，以替代 Glyphyicons

【讨论】：

【解决方案3】：

以下作品使用 font awesome 5 的“web fonts”替代方法而不是 svg。它使用 css 调整图标大小并与引导程序的 btn 类一起使用。

$('i').click(function() {
	$(this).removeClass('fa-sort btn-light')
		.addClass('fa-sort-up btn-primary')
})

i.fas {
	font-size:200px;
}

&lt;i class="btn btn-light fas fa-sort"&gt;&lt;/i&gt;

【讨论】：