如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标？

Posted 2023-03-06

【中文标题】如何在 Bootstrap 4 中使用 Font Awesome 中的 svg 图标？

【英文标题】：How do I use svg icons from Font Awesome in Bootstrap 4?

【发布时间】：2019-04-21 22:08:42

【问题描述】：

如何在 Bootstrap 4 中使用 Font Awesome 5.5 中的 svg 作为图标？

我想在 Bootstrap 4 中使用 Font Awesome 图标。我该如何以最好的方式做到这一点？我已经下载了 svg 文件，可以将它们用作普通图像，但它应该怎么做？

<div class="form-group">
<label for="name">Namn</label>
<div class="input-group">
<div class="input-group-prepend">
  <div class="input-group-text"><img src="img/svgs/regular/address-book.svg"   ></div>
</div>
    <input type="text" class="form-control" id="name" name="Name" placeholder="" value="" autofocus>
</div>
</div>

【问题讨论】：

为什么要使用 SVG？为什么不以正常方式使用字体。

确实是使用字体的最佳方式。但是如果你想使用 svg 的，只需添加一个 cssClass 和一个 css 来控制大小。

因为互联网上到处都说字体不应再用作图标（仅字体），而应替换为 svg。我喜欢 Font Awesome，因为它们有很多图标。

【参考方案1】：

去fontawesome网站点击导航栏的开始，然后在你的项目中添加svg cdn。

https://fontawesome.com/start

这是 svg 图标的 CDN

<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" 
integrity="sha384- 
EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" 
crossorigin="anonymous"></script>