Fix sub-icons issue with FA5

README.md

@@ -281,9 +281,9 @@ strikethrough | toggleStrikethrough | Strikethrough<br>fa fa-strikethrough
 heading | toggleHeadingSmaller | Heading<br>fa fa-header
 heading-smaller | toggleHeadingSmaller | Smaller Heading<br>fa fa-header
 heading-bigger | toggleHeadingBigger | Bigger Heading<br>fa fa-lg fa-header
-heading-1 | toggleHeading1 | Big Heading<br>fa fa-header fa-header-x fa-header-1
-heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header fa-header-x fa-header-2
-heading-3 | toggleHeading3 | Small Heading<br>fa fa-header fa-header-x fa-header-3
+heading-1 | toggleHeading1 | Big Heading<br>fa fa-header header-1
+heading-2 | toggleHeading2 | Medium Heading<br>fa fa-header header-2
+heading-3 | toggleHeading3 | Small Heading<br>fa fa-header header-3
 code | toggleCodeBlock | Code<br>fa fa-code
 quote | toggleBlockquote | Quote<br>fa fa-quote-left
 unordered-list | toggleUnorderedList | Generic List<br>fa fa-list-ul

src/css/easymde.css

@@ -149,7 +149,7 @@
     margin: 0 6px;
 }
 
-.editor-toolbar i.fa-header-x:after {
+.editor-toolbar button:after {
     font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
     font-size: 65%;
     vertical-align: text-bottom;
@@ -157,23 +157,23 @@
     top: 2px;
 }
 
-.editor-toolbar i.fa-header-1:after {
+.editor-toolbar button.heading-1:after {
     content: "1";
 }
 
-.editor-toolbar i.fa-header-2:after {
+.editor-toolbar button.heading-2:after {
     content: "2";
 }
 
-.editor-toolbar i.fa-header-3:after {
+.editor-toolbar button.heading-3:after {
     content: "3";
 }
 
-.editor-toolbar i.fa-header-bigger:after {
+.editor-toolbar button.heading-bigger:after {
     content: "▲";
 }
 
-.editor-toolbar i.fa-header-smaller:after {
+.editor-toolbar button.heading-smaller:after {
     content: "▼";
 }
 

src/js/easymde.js

@@ -118,6 +118,7 @@ function fixShortcut(name) {
 function createIcon(options, enableTooltips, shortcuts) {
     options = options || {};
     var el = document.createElement('button');
+    el.className = options.name;
     enableTooltips = (enableTooltips == undefined) ? true : enableTooltips;
 
     if (options.title && enableTooltips) {
@@ -1170,31 +1171,31 @@ var toolbarBuiltInButtons = {
     'heading-smaller': {
         name: 'heading-smaller',
         action: toggleHeadingSmaller,
-        className: 'fa fa-header fa-heading fa-header-x fa-header-smaller',
+        className: 'fa fa-header fa-heading header-smaller',
         title: 'Smaller Heading'
     },
     'heading-bigger': {
         name: 'heading-bigger',
         action: toggleHeadingBigger,
-        className: 'fa fa-header fa-heading fa-header-x fa-header-bigger',
+        className: 'fa fa-header fa-heading header-bigger',
         title: 'Bigger Heading'
     },
     'heading-1': {
         name: 'heading-1',
         action: toggleHeading1,
-        className: 'fa fa-header fa-heading fa-header-x fa-header-1',
+        className: 'fa fa-header fa-heading header-1',
         title: 'Big Heading'
     },
     'heading-2': {
         name: 'heading-2',
         action: toggleHeading2,
-        className: 'fa fa-header fa-heading fa-header-x fa-header-2',
+        className: 'fa fa-header fa-heading header-2',
         title: 'Medium Heading'
     },
     'heading-3': {
         name: 'heading-3',
         action: toggleHeading3,
-        className: 'fa fa-header fa-heading fa-header-x fa-header-3',
+        className: 'fa fa-header fa-heading header-3',
         title: 'Small Heading'
     },
     'separator-1': {