Html 从 Font Awesome 中提取 SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18113478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extracting SVG from Font Awesome
提问by Yarin
I want to get the SVG path data from Font Awesomeglyphs so that I can use them straight up as SVG in my HTML. I thought it would be as easy as copy-pasting the path data from fontawesome-webfont.svg, but when I use it in my HTML the symbols are all rendering upside-down. Anyone know why?
我想从Font Awesome字形中获取 SVG 路径数据，以便我可以在我的 HTML 中直接将它们用作 SVG。我认为这就像从fontawesome-webfont.svg复制粘贴路径数据一样简单，但是当我在我的 HTML 中使用它时，符号都被颠倒了。有谁知道为什么？
(See Fiddle)
（见小提琴）
Font Awesome SVG:
字体真棒SVG：
<glyph unicode="" 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" />
... Ported to HTML SVG (and scaled down):
...移植到 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>
采纳答案by Robert Longson
All per the SVG specification...
全部符合SVG 规范...
Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.
与 SVG 中的标准图形不同，初始坐标系的 y 轴指向下方，SVG 字体的设计网格以及字形的初始坐标系的 y 轴指向上方，以与公认的行业惯例保持一致。许多流行的字体格式。
As per this comment, Changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>seems to do the trick,
where 1792is the units-per-em and 1536is the ascent on font-face element
根据此评论，将包装器更改为<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>似乎可以解决问题，其中1792是每 em 单位，1536是 font-face 元素的上升
回答by Angie
Just get the ready svg icons from this github repo
They are already flipped and centered as needed
只需从这个 github repo 中获取准备好的 svg 图标
它们已经根据需要翻转和居中
Press any file and then "Raw"
按任何文件，然后按“原始”
回答by jedierikb
IcoMoon appmakes this dead simple.
IcoMoon 应用程序让这一切变得简单。
回答by jedierikb
Use fontforge script. There is a script I found online here:
使用 fontforge 脚本。我在网上找到了一个脚本：
fontforge -lang=ff -c 'Open(); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf
回答by tomByrer
There is also a node.js tool that will automate this for you, & create a before & after verify.html.
https://github.com/eugene1g/font-blast
还有一个 node.js 工具可以为您自动化，并创建一个 before & after verify.html。
https://github.com/eugene1g/font-blast
I've used it on other fonts, only 1 bad icon conversion so far, but rest in the font SVG was fine.
我已经在其他字体上使用过它，到目前为止只有 1 个错误的图标转换，但是字体 SVG 中的其余部分很好。
回答by Orlandster
You can simply download the latest version of fahere: https://fontawesome.com/
您可以简单地在fa此处下载最新版本：https: //fontawesome.com/
And then go to the advanced-options/raw-svgfolder. There you will find three folders brands, regularand solidcontaining all the latest icons available.
然后进入advanced-options/raw-svg文件夹。你会发现有三个文件夹brands，regular并solid包含所有最新的可用图标。
回答by John Dangerous
You can download them from flaticon.com here:
您可以在此处从 flaticon.com 下载它们：
回答by muah
You can just download any Font-Awesome svg you need from their repo at Github
你可以从他们在 Github 的 repo 下载你需要的任何 Font-Awesome svg
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
