106

我想从Font Awesome字形中获取 SVG 路径数据，这样我就可以在我的 HTML 中直接将它们用作 SVG。我认为这就像从fontawesome-webfont.svg复制粘贴路径数据一样简单，但是当我在我的 HTML 中使用它时，所有符号都颠倒了。有谁知道为什么？

（见小提琴）

字体真棒SVG： 

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... 移植到 HTML SVG（并按比例缩小）：

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>
4

8 回答 8

107

只需从此github repo获取准备好的 svg 图标
它们已经根据需要翻转和居中

在此处输入图像描述

按任何文件，然后按“原始” 在此处输入图像描述

于 2015-04-17T13:26:54.177 回答
70

全部符合SVG 规范...

与 SVG 中的标准图形不同，其中初始坐标系的 y 轴指向下方，SVG 字体的设计网格以及字形的初始坐标系具有指向上方的 y 轴，以与公认的行业惯例保持一致许多流行的字体格式。

根据此评论，将包装器更改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>似乎可以解决问题，其中1792是每 em 单位，而1536是 font-face 元素的上升

于 2013-08-07T20:47:53.403 回答
22

IcoMoon 应用程序让这一切变得简单。

于 2014-10-20T15:27:31.223 回答
18

使用 fontforge 脚本。我在这里找到了一个脚本：

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf

见： http: //fontforge.sourceforge.net/scripting.html

于 2014-10-20T15:49:51.313 回答
10

你可以从他们在 Github 的 repo 下载你需要的任何 Font-Awesome svg

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

于 2019-09-10T14:14:31.997 回答
8

还有一个 node.js 工具可以为您自动执行此操作，并创建一个 before & after verify.html。 https://github.com/eugene1g/font-blast

我已经在其他字体上使用过它，到目前为止只有 1 次错误的图标转换，但字体 SVG 的其余部分很好。

于 2016-06-24T15:54:45.560 回答
5

您可以在fa这里下载最新版本：https ://fontawesome.com/

然后转到advanced-options/raw-svg文件夹。在那里您会找到三个文件夹brands，regular其中solid包含所有可用的最新图标。

于 2018-03-13T17:46:18.123 回答
2

您可以在此处从 flaticon.com 下载它们：

http://www.flaticon.com/packs/font-awesome

于 2015-07-29T16:23:00.153 回答