从Font Awesome中提取SVG
Yar*_*rin 82 html5 svg font-awesome
我想从Font Awesome字形中获取SVG路径数据,以便我可以在HTML中直接使用它们作为SVG.我认为这就像从fontawesome-webfont.svg复制粘贴路径数据一样简单,但是当我在HTML中使用它时,符号都是颠倒的.谁知道为什么？
(见小提琴)
字体真棒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" />
...移植到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>
Ang*_*gie 88
只需从这个github repo中获取准备好的svg图标
它们已根据需要翻转并居中
按任意文件然后"原始"
- 我发现其中很多都有侧面裁剪的图标,例如汽车 (10认同)
- 版本 5 可以在这里找到 https://github.com/FortAwesome/Font-Awesome/blob/master/svgs (2认同)
Rob*_*son 61
根据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是每个单位的单位,1536是font-face元素的上升
- 为了完成这个答案,将包装器更改为"<svg height ="179.2"width ="179.2"> <path transform ="scale(0.1,-0.1)translate(0,-1536)"d ="... "/> </ svg>`似乎可以解决问题,其中`1792`是`unit-per-em`和`1536`是`font-face`元素的`ascent`. (6认同)
- Re `1792 is the units-per-em`：错别字？我认为匹配高度/宽度是“179.2”。 (2认同)
jed*_*ikb 20
IcoMoon应用程序简化了这一过程.
- IcoMoon非常容易使用,但我发现它导出的路径比[GitHub repo]中的SVG更长(https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/SVG).尝试比较fa-gift图标.`path`是IcoMoon的837个字符,而repo中的[514](https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/gift.svg). (3认同)
- Yea IcoMoon很棒 (2认同)
jed*_*ikb 10
使用fontforge脚本.我在网上找到了一个脚本:
fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf
请参阅:http: //fontforge.sourceforge.net/scripting.html
小智 8
你可以从他们在 Github 的 repo 下载你需要的任何 Font-Awesome svg
https://github.com/FortAwesome/Font-Awesome/tree/master/svgs
还有一个node.js工具将为您自动执行此操作，并创建一个before和after verify.html。
https://github.com/eugene1g/font-blast
到目前为止，我已经在其他字体上使用了该图标，但仅进行了1次不良的图标转换，但是其余的SVG字体都可以。
- 我将不得不尝试一下 (2认同)
您可以简单地在这里下载最新版本fa： https: //fontawesome.com/
然后转到该advanced-options/raw-svg文件夹。在那里您会发现三个文件夹brands，regular其中solid包含所有可用的最新图标。
| 归档时间： |
|
| 查看次数： |
59667 次 |
| 最近记录： |