添加自定义图标到Font Awesome

Question

我喜欢使用Font Awesome图标字体，并希望在我的网站上大部分使用它，但除了提供的图标外，还需要一些自定义的SVG图标。

我注意到Font Awesome的.svg版本主要由这些<glyph />元素组成：

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

把我的 SVG 图标代码复制并粘贴成一个新的字形元素，并分配一个未使用的 Unicode 字符，这样做是否有效？

- Christian Schlensker

---

你找到解决方案了吗？还是你只是选择了另一个插件？ - Michel Ayres

找不到 Font Awesome 的 .svg 版本链接，请更新。 - Yannis Dran

这是相关的文档：https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome - Rimian

链接已损坏。请使用https://fontawesome.com/v6.0/icons。 - Cybernetic

Answer 1

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

- davidtheclark

---

非常棒的服务。感谢您提供这个。在短时间内从SVG生成了自定义图标集。 - Nodoze

好工具。完美。 :) - Mark

嗨，我已经用一个包含SVG图标的文件夹生成了字体图标。但后来我想添加单个图标，这可行吗？还是我必须再次用整个文件夹重新生成？ - Varadha31590

Answer 2

在 Font Awesome 5 中，您可以使用自己的 SVG 数据创建自定义图标。这里有一个您可以操作的演示 GitHub 存储库，链接为：demo GitHub repo。此外，这是一个 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”的元素会被分配为 <path> 元素的 d 属性的值，而该<path>元素是<svg>的子元素。就像这样（为了清晰起见省略了一些细节）：

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

（从我类似的答案中适应过来：https://stackoverflow.com/a/50338775/4642871）

注：该段文字为说明引用来源，无需翻译。

- mwilkerson

---

如果我们想要使用标准前缀，这样新的SVG才能适应网站呢？ - Norbert Kardos

你可以使用任何前缀。但是，如果您使用标准前缀（fab、fas、far、fal），则可能更容易发生命名冲突——即使现在没有，随着我们继续添加具有这些标准前缀的图标，将来也可能会发生。使用自定义前缀不会使svg不太可能“适合网站”——但我不确定您所说的那个短语的含义，因此也许您可以澄清一下？ - mwilkerson

我们需要一个特定的社交品牌图标（拥有2亿以上用户），已经被要求了。 我们想将这个svg图标添加到专业版中，在网站上使用它，而不需要进行html/css例外/其他情况。 所有其他品牌都已经有了图标，因此fab类存在于元素上（实际选择的品牌动态添加到css中）。 - Norbert Kardos

是的，使用标准前缀添加自定义图标将很好地解决问题。但要记住，如果图标名称最终与我们稍后添加到该前缀的某些内容相同，则会发生冲突。因此，可能要选择一个不太可能发生冲突的图标名称？以下是演示所用的 Forked CodePen: https://codepen.io/fontawesome/pen/pZWXYX - mwilkerson

我的SVG来自Adobe AI文件，并且有多个路径。这使我无法正确设置上面指定的“d”参数。我必须先将AI文件转换为复合路径，然后再将其导出为SVG。我在这里学习了如何做到这一点：https://graphicdesign.stackexchange.com/questions/35054/making-multiple-vectors-one-single-vector-in-illustrator - Alex Standiford

您可以使用多个路径，因为“svg路径数据”可以是字符串或字符串数组。 - Cyral

Answer 3

我建议将您的图标与FontAwesome分开，创建并维护自己的定制库。个人认为，如果您要创建自己的图标库，则保持< b>FontAwesome 分离更容易维护。然后，您可以从CDN加载FontAwesome到您的站点中，无需担心其更新。

创建自己的自定义图标时，请使用Adobe Illustrator或类似软件逐个创建每个图标。创建完成后，请在计算机上单独保存每个图标的SVG格式。

接下来，请转到IcoMoon：http://icomoon.io，该网站拥有最好的字体生成软件（我个人认为），而且是免费的。 IcoMoon将允许您将单独保存的svg格式的字体导入到字体库中，然后生成您的自定义图标字形库，包括eot, ttf, woff, 和< code>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。例如：

你也可以通过在文本编辑器中打开由字体包生成的 svg 文件来获取字形的 Unicode 值 e953。例如：

（两个翻译都保留了原有内容，不过第二个更符合“通俗易懂”的要求）

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

- Pegues

---

无法正常工作，完成了整个过程，但是图标没有出现，取而代之的是数字。 - Inzmam ul Hassan

你能否再详细说明一下？我很乐意帮助你解决问题。你是否在selector:after中指定了font-family: customiconpack;？让我立即更新我的解决方案，针对selector:after的代码示例。 - Pegues

我上传了我的图标SVG文件，我下载了文件，将它们放入项目中并添加新的CSS文件到项目中，复制您的代码到文件中并使用我的图标代码更改了代码，但没能成功。 - Inzmam ul Hassan

请加入我创建的聊天室，以便我们更轻松地讨论问题：http://chat.stackoverflow.com/rooms/132402/fontawesome-icomoon-and-css-problems - Pegues

兄弟，我无法加入聊天室，请告诉我怎么办。 - Inzmam ul Hassan

我在这里评论只是为了让其他人知道问题所在，你的SVG是在Illustrator中从导入的PNG创建的。你必须重新创建矢量图标。PNG是一种位图格式，没有矢量曲线。 - Pegues

Answer 4

取决于你手头的文件。如果你的svg图标只是一条路径，那么只需将该“d”属性复制到一个新的<glyph>元素中即可轻松添加该字形。但是，该路径需要按照字体的坐标系（EM平方，通常为[0,0,2048,2048] - Truetype字体的标准）进行缩放，并与您想要对齐的基线对齐。

然而，并非所有的浏览器都支持svg字体，因此如果您想让它在各个浏览器上都能工作，您需要将其转换为其他格式。

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

- Erik Dahlström

Answer 5

与@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文件，关闭Inskscape
• 打开FontForge（如果您有多个显示器，请使用Windows-LeftArrow重新定位，因为它们具有奇怪的SWING java窗口，可能会超出监视器，并且弹出窗口存在模态问题 - 我不得不检查我的任务栏）
• 文件|打开fontawesome-webfont.svg
• 文件|导入
• 滚动到底部，右键单击图标|字形信息
• 更新字形名称为uniFXXX（XXX是501之类的数字，比FontAwesome v4.5中使用的最高Unicode更高）
• Unicode值U+fXXX
• 单击确定
• 文件|保存
• 文件|生成字体...
• 关闭FontForge
• 打开您的Web项目
• 将字体文件复制到（在我的项目中）"\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}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

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

• 最后，就像Samuel提到的那样，用以下内容更新你的CSS / LESS：

  .fa-XXX:before { content: "\f501"; }

- OzBob

Answer 6

我研究了一下SVG webfonts和字体创建，我的看法是，如果你想要在font-awesome已有的字体基础上“添加”字体，你需要执行以下步骤：

go to inkscape and create a glyph, save it as SVG so you could read the code, make sure to assign it a unicode character which is not currently used so it will not conflict with any of the existing glyphs in the font. this could be hard so i think a better simpler approad would be replacing an existing glyph with your own (just choose one you dont use, copy the first part:

Save the svg then convert it to web-font using any online converter so your webfont would work in all browsers.

once this is done, you should have either an SVG with one of the glyphs replaced in which case youre done. if not you need to create the CSS for your new glyph, in this case try and reuse FAs existing CSS, and only add

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

- Samuel Bergström

Answer 7

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

1- 前往http://fontawesome.io/下载zip文件并将其解压缩到您的桌面上。

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

3- 登录后，点击页眉选项：添加更多图标。

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

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

6- 在主页（页面的页眉）中选择您想要下载的图标，自定义它们以给予您的自定义名称，并选择发布以获得链接或下载字体和CSS。

对不起我的英语！ :D

- CarLoOSX

---

这样做是可行的，但我认为最好创建自己的自定义图标库并在侧边使用fontawesome。这将允许获取fontawesome的更新（包括新图标）。 - Guillaume Harari