Bootstrap 4 兼容 Font Awesome 吗？

Question

Bootstrap 4是否能与Font Awesome兼容？

Bootstrap 4刚发布beta版，我很担心Font Awesome甚至没有被列在Bootstrap的官方“首选图标集”页面中。

（图片链接）Bootstrap 4首选图标集

- Suman

---

Font Awesome的框架与Bootstrap完全独立，不应该有任何冲突。 - Robert

我理解，只是担心为什么它甚至没有列在Bootstrap首选的图标库之中。 - Suman

可能是由于他们偏爱SVG实现，而当前版本的Font Awesome中并不存在（但已经包含在FA5中）。但就“我能否将此与那个一起使用？”而言......可以。 - Robert

您想将您的评论作为答案添加吗？我可以将其标记为答案并关闭此问题。 - Suman

Answer 1

Font Awesome与Bootstrap框架完全分离，应该在组件中正常运行而不会出现问题。Bootstrap 4似乎更倾向于基于SVG的图标解决方案，这可能是为什么Font Awesome不在他们首选图标解决方案列表中的原因。

话虽如此 - 截至2017年8月15日，Font Awesome 5目前处于Beta 2阶段。它支持SVG图标，因此如果这对您很重要，那么它可能是一个值得考虑的选项。但是需要注意的是，Font Awesome 5是一项付费服务。

- Robert

Answer 2

在Bootstrap 2.x.x中，Glyphyicons是以图像格式存在的，因此您无法轻松地增加大小、更改颜色、背景颜色等。然而，字体图标提供了可缩放的矢量图标，可以立即定制-大小、颜色、投影和任何可以使用CSS完成的操作。

Font-awesome确实是Glyphyicons的替代品，随着新图标的不断更新而得到升级。Fat和Mdo计划将Font-awesome集成到Bootstrap版本3中，作为Glyphyicons的替代品。

- user8450943

Answer 3

以下代码使用 Font Awesome 5 的“Web Fonts”替代方法而非 SVG，通过 CSS 调整图标大小，并与 Bootstrap 的 btn 类一起使用。

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

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

<i class="btn btn-light fas fa-sort"></i>

- Phillip Senn