从Font Awesome中提取SVG

Question

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

（见Fiddle）

字体真棒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>

Answer 1

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

按任意文件，然后按＆＃34; Raw＆＃34;

Answer 2

所有SVG specification ...

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

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

Answer 3

IcoMoon app使这变得简单。

Answer 4

使用fontforge脚本。我找到了一个脚本online here：

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

请参阅： http://fontforge.sourceforge.net/scripting.html

Answer 5

还有一个node.js工具可以为您自动执行此操作，＆amp;创造一个前和后在verify.html之后。 https://github.com/eugene1g/font-blast

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

Answer 6

您可以在flaticon.com下载：

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

Answer 7

您只需在此处下载最新版本的fa：https://fontawesome.com/

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

Answer 8

您可以从Github的存储库中下载所需的任何Font-Awesome svg

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