nathan-muir/fontawesome-markers

An export of the fontawesome glyphs into named SVG Paths.

fontawesome-markers

An export of the fontawesome glyphs into named SVG Paths in javascript.

All glyphs have the same names as font-awesome, except they are capitalised, and underscored, eg "exclamation-circle" becomes "EXCLAMATION_CIRCLE"

Usage

Install on bower with bower install fontawesome-markers Or, install with NPM with npm install fontawesome-markers Or, just add fontawesome-markers.min.js to your page and reference it like the examples below.

If you're a masochist, you can try extracting other webfonts (or newer versions of Font Awesome) using the scripts in extractor/

Example - Font Awesome on Google Maps

You can use these paths, in products like Google Maps, for example:

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)
});

Example - Font Awesome on Canvas

You can also draw them to canvas, using the new Path2D api, you may need to use a polyfill for unsupported browsers

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);

Example - Loading Font Awesome Markers via JSON/ XHR

Instead of including it as an inline script, you can also load it with 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();

Update

• 18th April 2016 - Made it super easy to build for new versions of fontawesome. Released on Bower & NPM.
• 16th October 2014 - Updated to fontawesome 4.2.0
• 7th August 2014 - Updated to fontawesome 4.1.0, see the Fontawesome Upgrade Guide for the list of changed names.
• 26th September 2013 - Changed font extraction process - Glyph size is a much more manageable 64px now, and rotation / flip corrected.

fontawesome-markers's Issues

Is there an fontawesome-markers support for fontawesome 4.3.0

Hi,

first of all thank you for that magical tool/modue, that runs perfectly.

As far as I know, currently only fonatawesome 4.2.0 is supported. Is there a plan to support the current version of fontawesome (4.3.x)?

Thank you,

B0rner

Change fillColor on click event?

I am trying to fill marker with some color, but fail to implement.

Was trying like this:

google.maps.event.addListener(marker, 'click', function() {
    this.fillColor('black');
});

But surely it didn't work :(

Is EXCLAMATION_CIRCLE the only option

Is EXCLAMATION_CIRCLE the only option. I am not able to find any documentation for other options of paths.

Aliases are ignored

I noticed when doing the build for 4.3 that I could use "hotel" but not "bed". I would wager that in FontAwesome's SVG, one is referencing the other instead of being written out twice? In transform-webfont.php, if I do something like:

if($names[$hex] == 'fa-var-bed') echo $names[$hex];

I get an undefined index error. That may be something to go on.

thx for building this

👍

How to convert other icons, for example icomoon?

Transparent icons set background color

Font Awesome icons are often transparent (e.g. arrow-circle-right) and when we use this library to lay the marker onto the map the icons are difficult to see because of this transparency.

Ideally there would be a way with this to add a background color behind the transparency so that the font awesome marker comes out solid. For example, with arrow-circle-right, I would want the circle to be green and the arrow to be white, not transparent.

I've tried CSS, but something about how these are generated is prohibiting CSS as well.

markers is not defined

Hi, great plugin!

I had an error using ... path: fontawesome.markers.EXCLAMATION but if I write path: fontawesome.EXCLAMATION works well.

Maybe is wrong at your explanation or I'm missing something?

Thanks, Federico

Icon not centered

Just thought I'd post this to help anyone out that's having issues with the placement of the icon. You can set the anchor point of the icon with: anchor: new google.maps.Point(18.25, -5).

Here's an example:

var fontAwesomeIcon = {
path: fontawesome.markers.MAP_MARKER,
scale: 0.8,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: '#f8ae5f',
fillOpacity: 0.7,
anchor: new google.maps.Point(18.25, -5)
};