Bootstrap 4兼容Font Awesome

问题描述：

Bootstrap 4能与Font Awesome一起使用吗？Bootstrap 4兼容Font Awesome

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

字体真棒的框架是从引导完全分开的。不应该有冲突。 –

我明白，但只关心为什么它甚至没有列在Bootstrap的首选图标库中。 – Suman

这可能是由于他们偏好SVG的实现，这在目前的Font Awesome迭代中不存在（但是是FA5的一部分）。至于“我可以用这个吗？”尽管...是的。 –

答

字体真棒是从引导框架完全独立的，没有问题，它的成分中应有的功能。 Bootstrap 4似乎赞成基于SVG的图标解决方案，这可能有助于为什么Font Awesome不在其首选图标解决方案列表中。

这就是说 - 字体真棒5目前在8/15/17 Beta 2中。它具有SVG图标支持，所以如果这对你很重要，它可能是一个选择考虑。但我会注意到; Font Awesome 5是一项高级服务。

答

In Bootstrap 2.x.x Glyphyicons是图像格式，因此您不能容易地增加尺寸，更改颜色，背景颜色等。但是，font-awesome为您提供了可立即定制的可缩放矢量图标 - 大小，颜色，投影以及任何可以通过CSS实现的功能。

字体真棒真的是Glyphyicons的替代方案，它随时获得新图标的更新。 Fat和Mdo正在计划在Bootstrap版本3中集成Font-awesome作为Glyphyicons的替代品

答

下面的工作使用字体awesome 5的'web字体'替代svg的替代方法。它使用css调整图标大小，并与bootstrap的btn类一起使用。

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

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

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