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

Posted 2023-02-21

【中文标题】将自定义图标添加到字体真棒

【英文标题】：Add custom icons to font awesome

【发布时间】：2012-07-10 16:31:25

【问题描述】：

我喜欢 Font Awesome 图标字体，并希望将它用于我网站上的大多数图标，但除了提供的内容之外，我还需要一些自定义 svg 图标。

我注意到.svg version of Font Awesome 主要由这些<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 字符是否有效？

【问题讨论】：

您找到解决方案了吗？或者你只是选择了另一个堵塞？

未找到“.svg 版本的 Font Awesome”的链接。请更新。

这里是相关文档：github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

链接已损坏。使用fontawesome.com/v6.0/icons

【参考方案1】：

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

【讨论】：

谢谢:) 这很有帮助！

服务很好。感谢那。很快就从 svgs 生成了一个自定义图标集。

好工具。完美。:)

嗨，我已经生成了字体图标，其中包含一个包含 svg 图标的文件夹。但后来我想添加一个图标，是否可以添加？还是我必须用文件夹生成？。

【参考方案2】：

在 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”标记的元素将被分配为<path> 元素上的d 属性值，该元素是<svg> 的子元素。像这样（为了清楚起见省略了一些细节）：

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

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

【讨论】：

如果我们想使用标准前缀，新的 svg 可以适应网站怎么办？

你可以使用任何你喜欢的前缀。但是，如果您使用标准前缀（fab、fas、far、fal），您将面临更大的命名冲突风险——如果不是现在，那么将来可能会因为我们继续添加图标带有那些标准前缀。使用自定义前缀不会使 svg 不太可能“融入网站”——但我不确定你所说的那个短语是什么意思，所以也许你可以澄清一下？

我们需要一个特定的社交品牌图标（拥有超过 2 亿用户），这已经被请求了。我们想将此 svg 图标添加到专业版以在网站上使用它，而不会产生 html/css 异常/其他情况。所有其他品牌都已经有图标，因此元素上出现了 fab 类（并且实际选择的品牌被动态添加到 css 中）

是的，使用标准前缀添加自定义图标可以正常工作。请记住，如果图标名称最终与我们稍后添加到该前缀的名称相同，则会发生冲突。那么也许选择一个不太可能发生冲突的图标名称？ Fork CodePen 进行演示：codepen.io/fontawesome/pen/pZWXYX

您可以使用多个路径，因为“svg路径数据”可以是字符串或字符串[]

【参考方案3】：

我建议将您的图标与 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" ... />

【讨论】：

不工作,.,.完成整个过程只是图标不出现而是数字出现

您能详细说明一下吗？我很乐意帮助您解决您的问题。您是否使用 selector:after 指定了 font-family: customiconpack; ？让我现在为selector:after 代码示例更新我的解决方案。

我上传了我的图标 svg 文件，。我下载了文件，。，我把那些在项目中添加新的css文件复制到项目中，将你的代码复制到文件中，用我的图标代码更改了代码，。没用，。

请加入我创建的这个聊天室，以便我们更轻松地讨论问题：chat.***.com/rooms/132402/…

我在这里发表评论只是为了让其他人知道问题是您在 Illustrator 中从导入的 PNG 创建了 SVG。您必须将图标重新创建为矢量。 PNG 是一种光栅格式，没有矢量图形。

【参考方案4】：

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

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

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

【参考方案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 文件，关闭 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') 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;
    

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

最后，正如 Samuel 提到的，更新你的 CSS/LESS：

.fa-XXX:before 内容: "\f501";

【参考方案6】：

我对 SVG 网络字体和字体创建进行了一些研究，在我看来，如果您想将字体“添加”到现有字体中，您需要执行以下操作：

转到 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)
>

【参考方案7】：

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

1- 转到http://fontawesome.io/ 下载压缩包并将其解压缩到您的桌面中。

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

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

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

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

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

对不起我的英语！ :D

【讨论】：

这可行，但我认为创建自己的自定义图标库并使用 fontawesome 方面会更好。它将允许更新字体（使用新图标）。