添加自定义图标的字体真棒

小开

那要看你有什么了。如果 svg 图标只是一个路径，那么只需将‘ d’属性复制到一个新的 < glyph > 元素中，就可以很容易地添加该标志符号。然而，路径需要缩放到字体的坐标系(EM-square，通常是[0,0,2048,2048]-Truetype 字体的标准) ，并与你想要的基线对齐。

不过，并非所有浏览器都支持 svg 字体，因此如果您希望它在任何地方都能正常工作，就必须将其转换为其他格式。

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

小开

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

小开

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

去 inkscape 创建一个字形，保存为 SVG，这样你就可以阅读代码，确保给它分配一个当前没有使用的 Unicode字符，这样它就不会与字体中任何现有的字形冲突。这可能很难，所以我认为一个更简单的方法是用你自己的字形替换现有的字形(只要选择一个你不使用，复制第一部分:

保存 svg，然后使用任何在线转换器将其转换为 web-font，这样您的 webfont 就可以在所有浏览器中工作。

一旦完成这项工作，您应该有一个 SVG，其中一个字形被替换，在这种情况下您就完成了。如果不需要为新的标志符号创建 CSS，那么在这种情况下尝试重用现有的 FAs，并且只添加

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

小开

与@Samuel-bergström 类似:

下载 FontawesemSVGhttps://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 窗口，弹出窗口有模态问题——我必须检查一些我的任务栏)
文件 | 打开 fontawome-webfont. svg
文件 | 导入
滚动到底部，右击图标 | 字形信息
将字形名称更新为 uniFXXX (XXX 类似于501，比 FontAwesome 的 v4.5中使用的最高 Unicode 编码高)
Unicode 值 U + fXXX
单击 OK
文件 | 保存
文件 | 生成字体..。
关闭 FontForge
打开你的网络项目
将您的字体文件复制到(在我的项目中)“内容字体”文件夹。
编辑“内容样式 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;
}

我知道注释掉其他类型的文件可能会引起争议，但是很高兴听到如何生成。还是。注释中的 otf 文件。

最后，正如 Samuel 提到的，用以下方式更新 CSS/LESS:

. fa-XXX: 在{内容: “ f501”; }之前

小开

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

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

接下来，转到冰月: http://icomoon.io，它有最好的字体生成软件(在我看来) ，而且是免费的。冰月允许您将各个 svg 保存的字体导入到字体库中，然后在 eot、 ttf、 woff和 svg中生成自定义图标标志符号库。冰月不生成的一种格式是 woff2。

在生成你的图标包在冰月，头到 FontSquirrel: http://fontsquirrel.com和使用他们的字体生成器。使用在冰月生成的 ttf文件。在新创建的图标包中，您现在将拥有 woff2格式的图标包。

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

您将在这两个位置为您的图标包生成 CSS。但是在冰月上生成的 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;
}

请记住，您可以使用冰月软件获得图标包中每个图标的字形 Unicode 值。这些值对于通过 CSS 分配图标很有帮助，如下所示(假设我们使用的是上面示例 @font-face {...}中声明的 font-family) :

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

如果在文本编辑器中打开 font-pack 生成的 svg文件，还可以获得字形 unicode 值 e953。例如:

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

小开

如果你想要一些字体的图标(或者全部) ，包括你自定义的 svg 图标，你可以:

1-转到 http://fontawesome.io/下载压缩文件并解压缩-例如在你的桌面上。

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

3-一旦你已经登录，点击标题选项: 添加更多的图标。

4-选择字体可怕的 SVG 位于你提取的压缩文件中的字体内。

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

6-Inside Home (在页面的头部)选择你想下载的图标，自定义它们给你的自定义名称，并选择发布有一个链接或下载字体和 css。

对不起，我的英语不好

小开

在 Font Awesome 5中，您可以使用自己的 SVG 数据创建自定义图标。这是你可以玩的演示 GitHub 回购。以及这是密码笔，它展示了在 <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>元素(<svg>的子元素)上的 d属性的值。像这样(为了清晰起见，省略一些细节) :

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

(改编自我的类似答案: https://stackoverflow.com/a/50338775/4642871)