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

你可以给 fontcustom 一个go，它从svg文件创建自己的字体。

取决于你拥有的东西。如果你的svg图标只是一个路径，那么只需将'd'属性复制到一个新的<glyph>元素就可以轻松添加该字形。但是，路径需要缩放到字体的坐标系（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 Vlaue 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：在{content：“\ f501”之前; }

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

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

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

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

确保文件 eot， ttf， svg， woff，和 woff2 都是一样的名字。您正在从两个不同的网站/软件生成图标包，并且他们会以不同的方式命名其生成的输出。

您将在两个位置为您的图标包生成CSS。但是CSS生成了 IcoMoon 将不包括 woff2 你的格式 @font-face {} 宣言。确保在将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;
}

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

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

您还可以获取字形unicode值 e953 如果你打开font-pack生成的 svg 文件编辑器中的文件。例如。：

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

在Font Awesome 5中，您可以使用自己的SVG数据创建自定义图标。这是一个 演示GitHub回购 你可以玩。和 这是一个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”标记的元素将被指定为的值 d 属性 <path> 作为孩子的元素 <svg>。像这样（为了清楚起见，省略一些细节）：

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

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

我研究了一下SVG webfonts和字体创建，在我看来，如果你想要将字体“添加”到字体很棒的已经存在的字体，你需要做以下事情：

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

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

一旦完成，你应该有一个SVG，其中一个字形被替换，在这种情况下你就完成了。如果不是，你需要为你的新字形创建CSS，在这种情况下尝试并重用FAs现有的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中的字体awesome的SVG。

5-重复procces上传自己的svg文件。

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

抱歉我的英文！ ：d