FontAwesome v5.0.6 (#1372)

* Update FontAwesome to v5.0.6

* Adapt DiscussionListItem-count icon to match FontAwesome 5 syntax

* Change icon name to match FontAwesome 5.0.6 fas icon

* Add font type prefix parameter to icon helper

* Add Enable Icon Prefix to show icon in Extension Page

* Fix invalid icon behavior

* Change icon name to match FontAwesome 5.0.6 far icon

* Use iconPrefix property on component

* Use full icon class name

* Update icon helper docblock

* Full icon class syntax

js/lib/components/Alert.js

@@ -37,7 +37,7 @@ export default class Alert extends Component {
     if (dismissible || dismissible === undefined) {
       dismissControl.push(
         <Button
-          icon="times"
+          icon="fa fa-times"
           className="Button Button--link Button--icon Alert-dismiss"
           onclick={ondismiss}/>
       );

js/lib/components/Checkbox.js

@@ -52,7 +52,7 @@ export default class Checkbox extends Component {
   getDisplay() {
     return this.loading
       ? LoadingIndicator.component({size: 'tiny'})
-      : icon(this.props.state ? 'check' : 'times');
+      : icon(this.props.state ? 'fa fa-check' : 'fa fa-times');
   }
 
   /**

js/lib/components/Dropdown.js

@@ -26,7 +26,7 @@ export default class Dropdown extends Component {
     props.buttonClassName = props.buttonClassName || '';
     props.menuClassName = props.menuClassName || '';
     props.label = props.label || '';
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'caret-down';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-caret-down';
   }
 
   init() {

js/lib/components/Modal.js

@@ -29,7 +29,7 @@ export default class Modal extends Component {
           {this.isDismissible() ? (
             <div className="Modal-close App-backControl">
               {Button.component({
-                icon: 'times',
+                icon: 'fa fa-times',
                 onclick: this.hide.bind(this),
                 className: 'Button Button--icon Button--link'
               })}

js/lib/components/Navigation.js

@@ -52,7 +52,7 @@ export default class Navigation extends Component {
     return LinkButton.component({
       className: 'Button Navigation-back Button--icon',
       href: history.backUrl(),
-      icon: 'chevron-left',
+      icon: 'fa fa-chevron-left',
       title: previous.title,
       config: () => {},
       onclick: e => {
@@ -77,7 +77,7 @@ export default class Navigation extends Component {
     return Button.component({
       className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
       onclick: pane.togglePinned.bind(pane),
-      icon: 'thumb-tack'
+      icon: 'fa fa-thumbtack'
     });
   }
 
@@ -100,7 +100,7 @@ export default class Navigation extends Component {
         e.stopPropagation();
         drawer.show();
       },
-      icon: 'reorder'
+      icon: 'fa fa-bars'
     });
   }
 }

js/lib/components/Select.js

@@ -18,7 +18,7 @@ export default class Select extends Component {
         <select className="Select-input FormControl" onchange={onchange ? m.withAttr('value', onchange.bind(this)) : undefined} value={value}>
           {Object.keys(options).map(key => <option value={key}>{options[key]}</option>)}
         </select>
-        {icon('sort', {className: 'Select-caret'})}
+        {icon('fa fa-sort', {className: 'Select-caret'})}
       </span>
     );
   }

js/lib/components/SelectDropdown.js

@@ -13,7 +13,7 @@ import icon from 'flarum/helpers/icon';
  */
 export default class SelectDropdown extends Dropdown {
   static initProps(props) {
-    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'sort';
+    props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fa fa-sort';
 
     super.initProps(props);
 

js/lib/components/SplitDropdown.js

@@ -28,7 +28,7 @@ export default class SplitDropdown extends Dropdown {
         className={'Dropdown-toggle Button Button--icon ' + this.props.buttonClassName}
         data-toggle="dropdown">
         {icon(this.props.icon, {className: 'Button-icon'})}
-        {icon('caret-down', {className: 'Button-caret'})}
+        {icon('fa fa-caret-down', {className: 'Button-caret'})}
       </button>
     ];
   }