README

将Font-Awesome字体图标导出到javascript中的命名SVG路径

所有图标的名称与font-awesome相同，只是首字母大写并以下划线分隔，例如 "exclamation-circle" 变为 "EXCLAMATION_CIRCLE"

用法

使用bower安装 bower install fontawesome-markers 或使用NPM安装 npm install fontawesome-markers。或者，只需将 fontawesome-markers.min.js 添加到您的页面，并像以下示例一样引用它。

如果您是自虐狂，可以尝试使用 extractor/ 中的脚本提取其他Web字体（或Font Awesome的新版本）。

示例 - Google Maps上的Font Awesome

您可以使用这些路径，例如在Google Maps等产品中使用。

new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.EXCLAMATION_CIRCLE,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7,
    },
    clickable: false,
    position: new google.maps.LatLng(lat, lng)
});

示例 - Canvas上的Font Awesome

您也可以使用新的Path2D api将它们绘制到canvas上，可能需要使用不支持浏览器的polyfill。

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext("2d");
var path = new Path2D(fontawesome.markers.EXCLAMATION_CIRCLE);
ctx.strokeStyle="#ff0000";
ctx.lineWidth=2;
ctx.fillStyle="#0000ff";
ctx.translate(0, 64);
ctx.fill(path);
ctx.stroke(path);

示例 - 通过JSON/ XHR加载Font Awesome Markers

除了将其作为内联脚本包含，您还可以使用JSON/XHR加载它。

var fontawesome = {
   markers: null
};
var xhr = new XMLHttpRequest();
xhr.onload = function(){
  fontawesome.markers = JSON.parse(this.responseText);
}
xhr.open("get", "fontawesome-markers.json", true);
xhr.send();

更新

• 2016年4月18日 - 使构建新的fontawesome版本变得非常简单。已发布在Bower & NPM上。
• 2014年10月16日 - 更新到fontawesome 4.2.0
• 2014年8月7日 - 更新到fontawesome 4.1.0，有关更改名称的列表，请参阅Fontawesome升级指南。
• 2013年9月26日 - 更改字体提取过程 - 图标大小现在是64px，旋转/翻转已纠正。