Bootstrap 4与Font Awesome的兼容性

Question

Bootstrap 4是否适用于Font Awesome？

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

Answer 1

Font Awesome与Bootstrap Framework完全分开，应该在其组件内运行而不会出现问题。 Bootstrap 4似乎更倾向于使用基于SVG的图标解决方案，这可能会导致为什么Font Awesome不在他们的首选图标解决方案列表中。

即便如此 - 截至8/15/17，Font Awesome 5目前处于测试阶段2。它具有SVG图标支持，因此如果这对您很重要，可能需要考虑。我会注意到; Font Awesome 5是一项优质服务。

Answer 2

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

Font-awesome实际上是Glyphyicons的替代品，它随着新图标不断更新。 Fat和Mdo计划在引导版本3中集成Font-awesome作为Glyphyicons的替代品

Answer 3

以下工作使用字体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>