Add support for Font Awesome 5

Font Awesome 5 adds four new prefixes: * `fab` for brands * `fas` for the original solid style * `far` for regular outline style * `fal` for light outline style The actual prefix on the icon name is still `fa-`. So, for example, the Github icon (a brand) is `”fab fa-github”`. For backward compatibility, the `fa` prefix is still supported, and acts as an alias for `fas`, which means only the solid style icons are available. Fixes #8.
Leaflet · Dec 21, 2018 · 98f518c · 98f518c
1 parent 6a6d30b
commit 98f518c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/Leaflet.Icon.Glyph.js b/Leaflet.Icon.Glyph.js
@@ -42,6 +42,8 @@ L.Icon.Glyph = L.Icon.extend({
 		if (!options.prefix) {
 			glyphClass = '';
 			textContent = options.glyph;
+		} else if((options.prefix === "fab") || (options.prefix === "fal") || (options.prefix === "far") || (options.prefix === "fas")) {
+			glyphClass = "fa-" + options.glyph;
 		} else if(options.glyph.slice(0, options.prefix.length+1) === options.prefix + "-") {
 			glyphClass = options.glyph;
 		} else {
@@ -111,5 +113,3 @@ L.icon.glyph = function (options) {
 
 // Base64-encoded version of glyph-marker-icon.png
 L.Icon.Glyph.prototype.options.iconUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAUlSURBVFjDrZdLiBxVFIb/e289uqt6kkx6zIiIoKgLRReKuMhCcaOIAUEIiCCE4CIPggZ8kBjooPgM0TiYEUUjqBGchZqAQlyYRTA+kJiJQiJGMjN5zYzT3dP1rrr3HBeTjDGTSfc8Dvyruud89Z9z6kIJdBj31763MivsJXKuZYF6dak5++2mh7NOcsXVHq6sHbhOK/24kOJJMO4AE1vKygwZhxlKSHGKiD+RSu09vOXB43OCrHz96y6T2lsh+OmKXzFdlbLne2UopSAupBhjECcZgjDMgiiSxPhcK/nCr1sfOtcWcm/tq9uEsL4rl0vdK67pKVu2jUwTMk0wBBAzpBCQAnAtiZIlwWQwPlHPglZQAFj1Y23VwVkh92zbd59U+Kanp+p2L12mooKQ5AbcpuclS6LiKoRhxOfHzhXMcs3PtVV7Z0DufXH/LSzpSG9vr1/p6kIz0dDUrvx/IYXAsrJCkWc4e/Z0Zpgf+KX26A/TkNtrXziesY9Xq8tvWNZdVfVYg7hzwKVv3O3ZiKMWj46OTrq5fdOh1x5pSADwjdzo2nbv0u6qqkca2jCIMGcZAuqRhu8vEX7ZK2V2WgMAcXdtvyeKbPS662+osCohzMycHVweniNREoShoZO5KYobpciSh23bFq7rIUgNiLFghRkBlg2v7GlpiccsCHrcryzxUk3zmsNskeYGvt/lxVH4hMWEu9xSWaQFYQ7L1B6iGZ5bBoy+zWKiHiltFHpqeIsVhWaosg1iqlgg4wAAEYEXsV3EmNppJmExMFYUxfVSuIs6E0sI5FkBBhLJzH9laQxLSjBj0WQJgSJPweDTkknvS4JGbCuxKOt7UY4lEQfNnAu9TzLxN2nUdAQTLAEw8YIlAVgAkmDCSBL75eCutSeY+GTUqqNkqUVxUbIl4qgJo4vWzecrhyQAMJldYf1MXLLl1EIsYBZgoGwpRI2zMTPtGBhYbSQAlJF9lieRzNMIriVBzPOWawvoIkYaNC0u9IcAIAHgp75NLQl8ENbPZJ6jgAU48RyFqHEuZyE+Pda/vjENAQBD5s209Y+kPJlyM4+r3lUS0AWSyVEhpHnjYu1pyO+7N4ywwPvhxHDiuwo8j1b5rkQwMZIziYHBXetPzIAAgIV8exZOSMoieI6aU5vKtgR0jqw1JtiYbZfW/R/kSN+mcWbxdtwYjn1XTd9B7cQAfNdCWB/OhBR7jvWv/3tWCAAoO3ktjyZZJ0HHbsq2AooERVQXzPKly2vOgPz29jNNBr+e1IcSz5YAM4hmFzPDtyWS+lDK4N2DfU+dbgsBAFHyd+oszE3agt/GjWcrUBEjj5sQBb96pXpXhAzueDJi4u1p41TsuQpCiFln4bkKeXMoJeadg++tG+sYAgBBXOo3RRrruAnfkWDmGfIdCeQhiiQgQbxjtlqzQk59vCZlNluL5lDiORLyMjcA4DsKeXM4AfDKxa97ThAAqPaMfaR1Nq6jOiqOAhOm5TsKJg1QZGGRedY7V6tzVcjBWk1D0JZ8cigt2RJSimkXnqOgW8MxQLUTb6wN5g0BgGPV0c9BekTH41xx5YXrQ8FkTRgdpxU7ea9djbYQ1GokmJ43wUhWtgRcS04tQjAcw9CWw29tThYOAXD03XVfMps/TTTOy30blDZgiqxFK6p7OsnvCDJ1UD9LyUjORoPDkUQyPfdHbXW+qJCjfRsOwOAoNY4z6Xz01rHq3k5zO4ZMHTabYSIhJD87MLB64f8Ys8WdG/tfBljMJedfwY+s/2P4Pv8AAAAASUVORK5CYII=';
-
-
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The demo shows:
 * Plain glyphs (iconless)
 * <a href='https://materialdesignicons.com/'>Material design icons</a>
 * <a href='http://getbootstrap.com/components/#glyphicons'>Glyphicons-halflings from Bootstrap</a>
-* <a href='https://fortawesome.github.io/Font-Awesome/'>Font Awesome</a>
+* <a href='https://fontawesome.com'>Font Awesome</a>
 * <a href='http://metroui.org.ua/font.html'>Metro UI icon font</a>
 * <a href='https://github.com/github/octicons'>Github's Octicons</a>
 * <a href='https://github.com/iconic/open-iconic'>Iconic Open</a>
@@ -135,4 +135,3 @@ can do whatever you want with this stuff. If we meet some day, and you think
 this stuff is worth it, you can buy me a beer in return.
 
 ----------------------------------------------------------------------------
-
diff --git a/demo.html b/demo.html
@@ -15,9 +15,8 @@
 <!-- 	Glyphicons (from Bootstrap CDN) -->
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
 
-<!-- 	Font Awesome -->
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-
+<!--  Font Awesome 5 -->
+	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
 
 <!-- 	Metro UI icon font -->
 	<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-icons.min.css">
@@ -161,15 +160,16 @@ <h2><a href='http://getbootstrap.com/components/#glyphicons'>Glyphicons-halfling
 
 <hr>
 
-	<h2><a href='https://fortawesome.github.io/Font-Awesome/'>Font Awesome</a></h2>
+	<h2><a href='https://fontawesome.com'>Font Awesome</a></h2>
 
-	<div class='map' id='fa-map'></div>
+	<div class='map' id='fas-map'></div>
 	<p>
 	<code><pre>
-&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
 
 &lt;script>
-	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'fa', glyph: 'globe' }) }).addTo(map);
+	L.marker([-20,-20], {icon: L.icon.glyph({ prefix: 'fas', glyph: 'globe' }) }).addTo(map);
+	L.marker([20,20], {icon: L.icon.glyph({ prefix: 'fab', glyph: 'github' }) }).addTo(map);
 &lt;/script>
 	</pre></code></p>
 
@@ -428,11 +428,11 @@ <h2><a href='https://github.com/mapshakers/mapkeyicons'>Mapkey Icons</a></h2>
 
 
 	// Font Awesome
-	fillMap('fa',[
-		'asterisk' , 'ban' , 'automobile' , 'bars' , 'binoculars' ,
-		'bug' , 'bus' , 'check' , 'circle' , 'check-circle-o' ,
-		'close' , 'cloud' , 'leaf', 'comment' , 'compass' ,
-		'male' , 'female' , 'dashboard' , 'flag' , 'flash' ,
+	fillMap('fas',[
+		'asterisk' , 'ban' , 'car' , 'bars' , 'binoculars' ,
+		'bug' , 'bus' , 'check' , 'circle' , 'check-circle' ,
+		'window-close' , 'cloud' , 'leaf', 'comment' , 'compass' ,
+		'male' , 'female' , 'tachometer-alt' , 'flag' , 'file-pdf' ,
 		'flask' , 'cog' , 'info-circle' , 'motorcycle' , 'paper-plane'
 	], true);