如何在 Font Awesome 中使用自己的 SVG？答案

【问题标题】：How can one use one's own SVG in Font Awesome?如何在 Font Awesome 中使用自己的 SVG？
【发布时间】：2020-02-20 18:42:23
【问题描述】：

我有一个名为“carport.svg”的定制 .svg 文件。我想使用它，就好像它已经包含在 FontAwesome 中一样，因此使用 FontAwesome 基础设施。我已将文件放在 \svgs\solid 文件夹中。

我还需要做什么才能完全导入它？然后我想写在我的 HTML 中：

<i class="fas fa-carport"></i>

【问题讨论】：

github.com/FortAwesome/Font-Awesome/wiki/…
添加了详细的答案，因为不接受仅链接；）

标签： html css fonts font-awesome

【解决方案1】：

要使用 Font Awesome 图标，请在 HTML 页面的部分中添加以下行：

<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">

参考https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

【讨论】：

【解决方案2】：

您可以在以下link 中找到步骤。您需要将 SVG 路径定义为仅一个 path 元素，仅此而已（就像任何 SVG 图标一样），然后您只需添加以下代码：

var CustomIcon = {
  prefix: 'fac', /* your own prefix OR use any of the exiting ones (fab, far, fas)*/
  iconName: 'custom-icon', /* The name of your icon*/
  icon: [150, 150, [], 'e105', 'M ...'] /* The viewbox, the unicode, the path*/
}

FontAwesome.library.add(
  CustomIcon
)

添加三角形图标的简单示例：

var faTriangle = {
  prefix: 'fas',
  iconName: 'tri',
  icon: [64, 64, [], 'e521', 'M8 48 L56 48 L32 12 Z']
}

FontAwesome.library.add(
  faTriangle
)

i,svg {
  color: red;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

<i class="fas fa-tri fa-5x"></i>
<i class="fas fa-tri fa-8x"></i>
<i class="fas fa-tri fa-10x"></i>

【讨论】：