将自定义图标添加到字体真棒

试一试Icomoon。您可以上传自己的 SVG，将它们添加到库中，然后创建自定义字体，将 FontAwesome 与您自己的图标结合起来。

---

在 Font Awesome 5 中，您可以使用自己的 SVG 数据创建自定义图标。这是您可以使用的 demo GitHub repo。 here's a CodePen 显示了如何在 <script> 块中完成类似的操作。

无论哪种情况，它都只涉及使用 library.add() 添加一个对象，如下所示：

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

请注意，代码示例中由注释“svg path data”标记的元素将被分配为 <svg> 子元素的 <path> 元素上的 d 属性的值。像这样（为了清楚起见，省略了一些细节）：

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

（改编自我在这里的类似答案：https://stackoverflow.com/a/50338775/4642871）

---

我建议将您的图标与 FontAwesome 分开，并创建和维护您自己的自定义库。就个人而言，我认为如果您要创建自己的图标库，保持 FontAwesome 的独立性会容易得多。然后，您可以将 FontAwesome 从 CDN 加载到您的网站中，而不必担心保持最新状态。

创建您自己的自定义图标时，请通过 Adobe Illustrator 或类似软件创建每个图标。创建图标后，将每个图标以 SVG 格式单独保存在您的计算机上。

接下来，前往 IcoMoon: http://icomoon.io ，它拥有最好的字体生成软件（在我看来），而且它是免费的。 IcoMoon 将允许您将个人保存的 svg 字体导入字体库，然后在 eot、ttf、woff 和 svg 中生成您的自定义图标字形库。 IcoMoon 不生成的一种格式是 woff2。

在 IcoMoon 生成图标包后，前往 FontSquirrel：http://fontsquirrel.com 并使用他们的字体生成器。使用在 IcoMoon 生成的 ttf 文件。在创建的新生成的图标包中，您现在将拥有 woff2 格式的图标包。

确保 eot、ttf、svg、woff 和 woff2 的文件名称相同。您正在从两个不同的网站/软件生成一个图标包，它们确实以不同的方式命名它们生成的输出。

您将在这两个位置为您的图标包生成 CSS。但在 IcoMoon 生成的 CSS 不会在您的 @font-face {} 声明中包含 woff2 格式。确保在将 CSS 添加到项目时添加：

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

请记住，您可以使用 IcoMoon 软件获取图标包中每个图标的字形 unicode 值。这些值有助于通过 CSS 分配您的图标，如下所示（假设我们使用上面示例 @font-face {...} 中声明的 font-family）：

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

如果您在文本编辑器中打开字体包生成的 svg 文件，您还可以获得字形 unicode 值 e953。例如：

<glyph unicode="&#xe953;" glyph-name="eye" ... />

---

取决于你有什么。如果您的 svg 图标只是一个路径，那么只需将 'd' 属性复制到新的 元素即可轻松添加该字形。但是，路径需要缩放到字体的坐标系（EM-square，通常是 [0,0,2048,2048] - Truetype 字体的标准）并与您想要的基线对齐。

但是，并非所有浏览器都支持 svg 字体，因此如果您希望它在任何地方都可以使用，您也必须将其转换为其他格式。

Fontforge 可以导入 svg 文件（选择一个字形插槽，文件 > 导入，然后选择您的 svg 图像），然后您可以转换为所有相关的字体格式（svg、truetype、woff 等）。

---

与@Samuel-bergström 类似的方法：

下载 Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg

下载 FontForge http://fontforge.github.io/en-US/downloads/

下载 Inkscape

打开 Inskscape 并创建一个单层形状作为新字体图标

保存 SVG 文件，关闭 Inkscape

打开 FontForge （如果您有多个显示器，请使用 Windows-LeftArrow 重新定位，因为它们有奇怪的 SWING java 窗口关闭显示器，并且弹出窗口有模式问题 - 我必须检查我的任务栏有一些）

文件 |打开 fontawesome-webfont.svg

文件 |进口

滚动到底部，右键单击图标 |字形信息

将字形名称更新为 uniFXXX（XXX 类似于 501，比 FontAwesome v4.5 中使用的最高 Unicode 更高的数字）

Unicode 值 U+fXXX

点击确定

文件 |节省

文件 |生成字体...

关闭 FontForge

打开您的网络项目

将您的字体文件复制到（在我的项目中）“\Content\fonts\”文件夹。

将“\Content\styles\fa\path.less”编辑为：

@font-face { font-family: 'FontAwesome'; //src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); src: //url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') 格式('embedded-opentype'), //url('@{fa -font-path}/fontwesome-webfont.woff2?v=@{get-version}')格式('woff2'),url('@{get-font-path}/font wesomeregular.woff?v=@{ get -version}') 格式('woff'), url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') 格式('truetype'), url('@ { fa-font-path}/fontwesomeregular.svg?v=@{fa-version}#fontwesomeregular') 格式('svg'); // src: url('@{fa-font-path}/FontAwesome.otf') 格式('opentype'); // 开发字体时使用 font-weight : normal ;字体样式：正常； } }

我知道注释掉其他文件类型可能是“有争议的”，但很高兴听到如何在注释中生成 .eot 或 .otf 文件。

最后，正如塞缪尔所说，更新你的 CSS/LESS： .fa-XXX:before { content: "\f501"; }

---

我对 SVG webfonts 和字体创建进行了一些研究，在我看来，如果您想将字体“添加”到 font-awesome 已经存在的字体中，您需要执行以下操作：

转到inkscape并创建一个字形，将其保存为SVG，以便您可以阅读代码，确保为其分配一个当前未使用的unicode字符，这样它就不会与字体中的任何现有字形冲突。这可能很难，所以我认为一个更好更简单的方法是用你自己的字形替换现有的字形（只需选择一个你不使用的字形，复制第一部分：

保存 svg 然后使用任何在线转换器将其转换为网络字体，这样您的网络字体就可以在所有浏览器中使用。

完成此操作后，您应该拥有一个替换了其中一个字形的 SVG，在这种情况下您就完成了。如果不是，您需要为新字形创建 CSS，在这种情况下，请尝试重用 FA 现有的 CSS，并且只添加

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

---

如果您想要一些来自 font-awesome 的图标（或全部），包括您的自定义 svg 图标，您可以：

1- 转到 http://fontawesome.io/ 下载 zip 并解压缩，例如在您的桌面中。

2- 转到 http://fontastic.me/ 使用您的电子邮件创建一个帐户。

3- 登录后单击标题选项：添加更多图标。

4- 选择位于您提取的 zip inside 字体中的 font-awesome 的 SVG。

5-重复上传您自己的svg文件的过程。

6- 在主页内（在页面的标题处）选择您要下载的图标，自定义它们以提供您的自定义名称，然后选择发布以获得链接或下载字体和 css。

对不起我的英语！ :D

---