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
2025-08-05 07:57:46 +02:00 · 2018-02-24 05:42:00 +07:00
parent 0f554585ac
commit 1a2df2d581
51 changed files with 124 additions and 119 deletions
--- a/js/forum/src/components/AvatarEditor.js
+++ b/js/forum/src/components/AvatarEditor.js
@@ -53,7 +53,7 @@ export default class AvatarEditor extends Component {
          ondragleave={this.disableDragover.bind(this)}
          ondragend={this.disableDragover.bind(this)}
          ondrop={this.dropUpload.bind(this)}>
-          {this.loading ? LoadingIndicator.component() : (user.avatarUrl() ? icon('pencil') : icon('plus-circle'))}
+          {this.loading ? LoadingIndicator.component() : (user.avatarUrl() ? icon('fa fa-pencil-alt') : icon('fa fa-plus-circle'))}
        </a>
        <ul className="Dropdown-menu Menu">
          {listItems(this.controlItems().toArray())}
@@ -72,7 +72,7 @@ export default class AvatarEditor extends Component {

    items.add('upload',
      Button.component({
-        icon: 'upload',
+        icon: 'fa fa-upload',
        children: app.translator.trans('core.forum.user.avatar_upload_button'),
        onclick: this.openPicker.bind(this)
      })
@@ -80,7 +80,7 @@ export default class AvatarEditor extends Component {

    items.add('remove',
      Button.component({
-        icon: 'times',
+        icon: 'fa fa-times',
        children: app.translator.trans('core.forum.user.avatar_remove_button'),
        onclick: this.remove.bind(this)
      })
--- a/js/forum/src/components/CommentPost.js
+++ b/js/forum/src/components/CommentPost.js
@@ -142,7 +142,7 @@ export default class CommentPost extends Post {
      items.add('toggle', (
        Button.component({
          className: 'Button Button--default Button--more',
-          icon: 'ellipsis-h',
+          icon: 'fa fa-ellipsis-h',
          onclick: this.toggleContent.bind(this)
        })
      ));
--- a/js/forum/src/components/Composer.js
+++ b/js/forum/src/components/Composer.js
@@ -422,28 +422,28 @@ class Composer extends Component {

    if (this.position === Composer.PositionEnum.FULLSCREEN) {
      items.add('exitFullScreen', ComposerButton.component({
-        icon: 'compress',
+        icon: 'fa fa-compress',
        title: app.translator.trans('core.forum.composer.exit_full_screen_tooltip'),
        onclick: this.exitFullScreen.bind(this)
      }));
    } else {
      if (this.position !== Composer.PositionEnum.MINIMIZED) {
        items.add('minimize', ComposerButton.component({
-          icon: 'minus minimize',
+          icon: 'fa fa-minus minimize',
          title: app.translator.trans('core.forum.composer.minimize_tooltip'),
          onclick: this.minimize.bind(this),
          itemClassName: 'App-backControl'
        }));

        items.add('fullScreen', ComposerButton.component({
-          icon: 'expand',
+          icon: 'fa fa-expand',
          title: app.translator.trans('core.forum.composer.full_screen_tooltip'),
          onclick: this.fullScreen.bind(this)
        }));
      }

      items.add('close', ComposerButton.component({
-        icon: 'times',
+        icon: 'fa fa-times',
        title: app.translator.trans('core.forum.composer.close_tooltip'),
        onclick: this.close.bind(this)
      }));
--- a/js/forum/src/components/DiscussionListItem.js
+++ b/js/forum/src/components/DiscussionListItem.js
@@ -81,7 +81,7 @@ export default class DiscussionListItem extends Component {
    return (
      <div {...attrs}>
        {controls.length ? Dropdown.component({
-          icon: 'ellipsis-v',
+          icon: 'fa fa-ellipsis-v',
          children: controls,
          className: 'DiscussionListItem-controls',
          buttonClassName: 'Button Button--icon Button--flat Slidable-underneath Slidable-underneath--right'
@@ -89,7 +89,7 @@ export default class DiscussionListItem extends Component {

        <a className={'Slidable-underneath Slidable-underneath--left Slidable-underneath--elastic' + (isUnread ? '' : ' disabled')}
          onclick={this.markAsRead.bind(this)}>
-          {icon('check')}
+          {icon('fa fa-check')}
        </a>

        <div className={'DiscussionListItem-content Slidable-content' + (isUnread ? ' unread' : '') + (isRead ? ' read' : '')}>
--- a/js/forum/src/components/DiscussionPage.js
+++ b/js/forum/src/components/DiscussionPage.js
@@ -240,7 +240,7 @@ export default class DiscussionPage extends Page {
    items.add('controls',
      SplitDropdown.component({
        children: DiscussionControls.controls(this.discussion, this).toArray(),
-        icon: 'ellipsis-v',
+        icon: 'fa fa-ellipsis-v',
        className: 'App-primaryControl',
        buttonClassName: 'Button--primary'
      })
--- a/js/forum/src/components/DiscussionRenamedNotification.js
+++ b/js/forum/src/components/DiscussionRenamedNotification.js
@@ -10,7 +10,7 @@ import Notification from 'flarum/components/Notification';
 */
 export default class DiscussionRenamedNotification extends Notification {
  icon() {
-    return 'pencil';
+    return 'fa fa-pencil-alt';
  }

  href() {
--- a/js/forum/src/components/DiscussionRenamedPost.js
+++ b/js/forum/src/components/DiscussionRenamedPost.js
@@ -11,7 +11,7 @@ import extractText from 'flarum/utils/extractText';
 */
 export default class DiscussionRenamedPost extends EventPost {
  icon() {
-    return 'pencil';
+    return 'fa fa-pencil-alt';
  }

  description(data) {
--- a/js/forum/src/components/DiscussionsSearchSource.js
+++ b/js/forum/src/components/DiscussionsSearchSource.js
@@ -35,7 +35,7 @@ export default class DiscussionsSearchSource {
      <li className="Dropdown-header">{app.translator.trans('core.forum.search.discussions_heading')}</li>,
      <li>
        {LinkButton.component({
-          icon: 'search',
+          icon: 'fa fa-search',
          children: app.translator.trans('core.forum.search.all_discussions_button', {query}),
          href: app.route('index', {q: query})
        })}
--- a/js/forum/src/components/EditPostComposer.js
+++ b/js/forum/src/components/EditPostComposer.js
@@ -52,7 +52,7 @@ export default class EditPostComposer extends ComposerBody {

    items.add('title', (
      <h3>
-        {icon('pencil')} {' '}
+        {icon('fa fa-pencil-alt')} {' '}
        <a href={app.route.discussion(post.discussion(), post.number())} config={routeAndMinimize}>
          {app.translator.trans('core.forum.composer_edit.post_link', {number: post.number(), discussion: post.discussion().title()})}
        </a>
--- a/js/forum/src/components/HeaderSecondary.js
+++ b/js/forum/src/components/HeaderSecondary.js
@@ -46,7 +46,7 @@ export default class HeaderSecondary extends Component {
        locales.push(Button.component({
          active: app.data.locale === locale,
          children: app.data.locales[locale],
-          icon: app.data.locale === locale ? 'check' : true,
+          icon: app.data.locale === locale ? 'fa fa-check' : true,
          onclick: () => {
            if (app.session.user) {
              app.session.user.savePreferences({locale}).then(() => window.location.reload());
--- a/js/forum/src/components/IndexPage.js
+++ b/js/forum/src/components/IndexPage.js
@@ -154,7 +154,7 @@ export default class IndexPage extends Page {
    items.add('newDiscussion',
      Button.component({
        children: app.translator.trans(canStartDiscussion ? 'core.forum.index.start_discussion_button' : 'core.forum.index.cannot_start_discussion_button'),
-        icon: 'edit',
+        icon: 'fa fa-edit',
        className: 'Button Button--primary IndexPage-newDiscussion',
        itemClassName: 'App-primaryControl',
        onclick: this.newDiscussion.bind(this),
@@ -187,7 +187,7 @@ export default class IndexPage extends Page {
      LinkButton.component({
        href: app.route('index', params),
        children: app.translator.trans('core.forum.index.all_discussions_link'),
-        icon: 'comments-o'
+        icon: 'far fa-comments'
      }),
      100
    );
@@ -221,7 +221,7 @@ export default class IndexPage extends Page {

          return Button.component({
            children: label,
-            icon: active ? 'check' : true,
+            icon: active ? 'fa fa-check' : true,
            onclick: this.changeSort.bind(this, value),
            active: active,
          })
@@ -244,7 +244,7 @@ export default class IndexPage extends Page {
    items.add('refresh',
      Button.component({
        title: app.translator.trans('core.forum.index.refresh_tooltip'),
-        icon: 'refresh',
+        icon: 'fa fa-sync',
        className: 'Button Button--icon',
        onclick: () => {
          app.cache.discussionList.refresh();
@@ -260,7 +260,7 @@ export default class IndexPage extends Page {
      items.add('markAllAsRead',
        Button.component({
          title: app.translator.trans('core.forum.index.mark_all_as_read_tooltip'),
-          icon: 'check',
+          icon: 'fa fa-check',
          className: 'Button Button--icon',
          onclick: this.markAllAsRead.bind(this)
        })
--- a/js/forum/src/components/NotificationGrid.js
+++ b/js/forum/src/components/NotificationGrid.js
@@ -177,13 +177,13 @@ export default class NotificationGrid extends Component {

    items.add('alert', {
      name: 'alert',
-      icon: 'bell',
+      icon: 'fa fa-bell',
      label: app.translator.trans('core.forum.settings.notify_by_web_heading'),
    });

    items.add('email', {
      name: 'email',
-      icon: 'envelope-o',
+      icon: 'far fa-envelope',
      label: app.translator.trans('core.forum.settings.notify_by_email_heading'),
    });

@@ -206,7 +206,7 @@ export default class NotificationGrid extends Component {

    items.add('discussionRenamed', {
      name: 'discussionRenamed',
-      icon: 'pencil',
+      icon: 'fa fa-pencil-alt',
      label: app.translator.trans('core.forum.settings.notify_discussion_renamed_label')
    });

--- a/js/forum/src/components/NotificationList.js
+++ b/js/forum/src/components/NotificationList.js
@@ -34,7 +34,7 @@ export default class NotificationList extends Component {
          <div className="App-primaryControl">
            {Button.component({
              className: 'Button Button--icon Button--link',
-              icon: 'check',
+              icon: 'fa fa-check',
              title: app.translator.trans('core.forum.notifications.mark_all_as_read_tooltip'),
              onclick: this.markAllAsRead.bind(this)
            })}
--- a/js/forum/src/components/NotificationsDropdown.js
+++ b/js/forum/src/components/NotificationsDropdown.js
@@ -8,7 +8,7 @@ export default class NotificationsDropdown extends Dropdown {
    props.buttonClassName = props.buttonClassName || 'Button Button--flat';
    props.menuClassName = props.menuClassName || 'Dropdown-menu--right';
    props.label = props.label || app.translator.trans('core.forum.notifications.tooltip');
-    props.icon = props.icon || 'bell';
+    props.icon = props.icon || 'fa fa-bell';

    super.initProps(props);
  }
--- a/js/forum/src/components/Post.js
+++ b/js/forum/src/components/Post.js
@@ -57,7 +57,7 @@ export default class Post extends Component {
                      className="Post-controls"
                      buttonClassName="Button Button--icon Button--flat"
                      menuClassName="Dropdown-menu--right"
-                      icon="ellipsis-h"
+                      icon="fa fa-ellipsis-h"
                      onshow={() => this.$('.Post-actions').addClass('open')}
                      onhide={() => this.$('.Post-actions').removeClass('open')}>
                      {controls}
--- a/js/forum/src/components/PostStreamScrubber.js
+++ b/js/forum/src/components/PostStreamScrubber.js
@@ -84,13 +84,13 @@ export default class PostStreamScrubber extends Component {
    return (
      <div className={'PostStreamScrubber Dropdown ' + (this.disabled() ? 'disabled ' : '') + (this.props.className || '')}>
        <button className="Button Dropdown-toggle" data-toggle="dropdown">
-          {viewing} {icon('sort')}
+          {viewing} {icon('fa fa-sort')}
        </button>

        <div className="Dropdown-menu dropdown-menu">
          <div className="Scrubber">
            <a className="Scrubber-first" onclick={this.goToFirst.bind(this)}>
-              {icon('angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
+              {icon('fa fa-angle-double-up')} {app.translator.trans('core.forum.post_scrubber.original_post_link')}
            </a>

            <div className="Scrubber-scrollbar">
@@ -110,7 +110,7 @@ export default class PostStreamScrubber extends Component {
            </div>

            <a className="Scrubber-last" onclick={this.goToLast.bind(this)}>
-              {icon('angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
+              {icon('fa fa-angle-double-down')} {app.translator.trans('core.forum.post_scrubber.now_link')}
            </a>
          </div>
        </div>
--- a/js/forum/src/components/ReplyComposer.js
+++ b/js/forum/src/components/ReplyComposer.js
@@ -51,7 +51,7 @@ export default class ReplyComposer extends ComposerBody {

    items.add('title', (
      <h3>
-        {icon('reply')} {' '}
+        {icon('fa fa-reply')} {' '}
        <a href={app.route.discussion(discussion)} config={routeAndMinimize}>{discussion.title()}</a>
      </h3>
    ));
--- a/js/forum/src/components/Search.js
+++ b/js/forum/src/components/Search.js
@@ -92,7 +92,7 @@ export default class Search extends Component {
          {this.loadingSources
            ? LoadingIndicator.component({size: 'tiny', className: 'Button Button--icon Button--link'})
            : currentSearch
-              ? <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>{icon('times-circle')}</button>
+              ? <button className="Search-clear Button Button--icon Button--link" onclick={this.clear.bind(this)}>{icon('fa fa-times-circle')}</button>
              : ''}
        </div>
        <ul className="Dropdown-menu Search-results">
--- a/js/forum/src/components/SessionDropdown.js
+++ b/js/forum/src/components/SessionDropdown.js
@@ -46,7 +46,7 @@ export default class SessionDropdown extends Dropdown {

    items.add('profile',
      LinkButton.component({
-        icon: 'user',
+        icon: 'fa fa-user',
        children: app.translator.trans('core.forum.header.profile_button'),
        href: app.route.user(user)
      }),
@@ -55,7 +55,7 @@ export default class SessionDropdown extends Dropdown {

    items.add('settings',
      LinkButton.component({
-        icon: 'cog',
+        icon: 'fa fa-cog',
        children: app.translator.trans('core.forum.header.settings_button'),
        href: app.route('settings')
      }),
@@ -65,7 +65,7 @@ export default class SessionDropdown extends Dropdown {
    if (app.forum.attribute('adminUrl')) {
      items.add('administration',
        LinkButton.component({
-          icon: 'wrench',
+          icon: 'fa fa-wrench',
          children: app.translator.trans('core.forum.header.admin_button'),
          href: app.forum.attribute('adminUrl'),
          target: '_blank',
@@ -79,7 +79,7 @@ export default class SessionDropdown extends Dropdown {

    items.add('logOut',
      Button.component({
-        icon: 'sign-out',
+        icon: 'fa fa-sign-out-alt',
        children: app.translator.trans('core.forum.header.log_out_button'),
        onclick: app.session.logout.bind(app.session)
      }),
--- a/js/forum/src/components/TerminalPost.js
+++ b/js/forum/src/components/TerminalPost.js
@@ -20,7 +20,7 @@ export default class TerminalPost extends Component {

    return (
      <span>
-        {lastPost ? icon('reply') : ''}{' '}
+        {lastPost ? icon('fa fa-reply') : ''}{' '}
        {app.translator.trans('core.forum.discussion_list.' + (lastPost ? 'replied' : 'started') + '_text', {
          user,
          ago: humanTime(time)
--- a/js/forum/src/components/TextEditor.js
+++ b/js/forum/src/components/TextEditor.js
@@ -70,7 +70,7 @@ export default class TextEditor extends Component {
    items.add('submit',
      Button.component({
        children: this.props.submitLabel,
-        icon: 'check',
+        icon: 'fa fa-check',
        className: 'Button Button--primary',
        itemClassName: 'App-primaryControl',
        onclick: this.onsubmit.bind(this)
@@ -80,7 +80,7 @@ export default class TextEditor extends Component {
    if (this.props.preview) {
      items.add('preview',
        Button.component({
-          icon: 'eye',
+          icon: 'fa fa-eye',
          className: 'Button Button--icon',
          onclick: this.props.preview,
          title: app.translator.trans('core.forum.composer.preview_tooltip')
--- a/js/forum/src/components/UserCard.js
+++ b/js/forum/src/components/UserCard.js
@@ -40,7 +40,7 @@ export default class UserCard extends Component {
              menuClassName: 'Dropdown-menu--right',
              buttonClassName: this.props.controlsButtonClassName,
              label: app.translator.trans('core.forum.user_controls.button'),
-              icon: 'ellipsis-v'
+              icon: 'fa fa-ellipsis-v'
            }) : ''}

            <div className="UserCard-profile">
@@ -87,8 +87,8 @@ export default class UserCard extends Component {
      items.add('lastSeen', (
        <span className={'UserCard-lastSeen' + (online ? ' online' : '')}>
          {online
-            ? [icon('circle'), ' ', app.translator.trans('core.forum.user.online_text')]
-            : [icon('clock-o'), ' ', humanTime(lastSeenTime)]}
+            ? [icon('fa fa-circle'), ' ', app.translator.trans('core.forum.user.online_text')]
+            : [icon('far fa-clock'), ' ', humanTime(lastSeenTime)]}
        </span>
      ));
    }
--- a/js/forum/src/components/UserPage.js
+++ b/js/forum/src/components/UserPage.js
@@ -130,7 +130,7 @@ export default class UserPage extends Page {
      LinkButton.component({
        href: app.route('user.posts', {username: user.username()}),
        children: [app.translator.trans('core.forum.user.posts_link'), <span className="Button-badge">{user.commentsCount()}</span>],
-        icon: 'comment-o'
+        icon: 'far fa-comment'
      }),
      100
    );
@@ -139,7 +139,7 @@ export default class UserPage extends Page {
      LinkButton.component({
        href: app.route('user.discussions', {username: user.username()}),
        children: [app.translator.trans('core.forum.user.discussions_link'), <span className="Button-badge">{user.discussionsCount()}</span>],
-        icon: 'reorder'
+        icon: 'fa fa-bars'
      }),
      90
    );
@@ -150,7 +150,7 @@ export default class UserPage extends Page {
        LinkButton.component({
          href: app.route('settings'),
          children: app.translator.trans('core.forum.user.settings_link'),
-          icon: 'cog'
+          icon: 'fa fa-cog'
        }),
        -100
      );
--- a/js/forum/src/components/WelcomeHero.js
+++ b/js/forum/src/components/WelcomeHero.js
@@ -21,7 +21,7 @@ export default class WelcomeHero extends Component {
      <header className="Hero WelcomeHero">
        <div class="container">
          {Button.component({
-            icon: 'times',
+            icon: 'fa fa-times',
            onclick: slideUp,
            className: 'Hero-close Button Button--icon Button--link'
          })}
--- a/js/forum/src/initializers/alertEmailConfirmation.js
+++ b/js/forum/src/initializers/alertEmailConfirmation.js
@@ -24,7 +24,7 @@ export default function alertEmailConfirmation(app) {
        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
      }).then(() => {
        resendButton.props.loading = false;
-        resendButton.props.children = [icon('check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
+        resendButton.props.children = [icon('fa fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
        resendButton.props.disabled = true;
        m.redraw();
      }).catch(() => {
--- a/js/forum/src/utils/DiscussionControls.js
+++ b/js/forum/src/utils/DiscussionControls.js
@@ -55,12 +55,12 @@ export default {
      items.add('reply',
        !app.session.user || discussion.canReply()
          ? Button.component({
-            icon: 'reply',
+            icon: 'fa fa-reply',
            children: app.translator.trans(app.session.user ? 'core.forum.discussion_controls.reply_button' : 'core.forum.discussion_controls.log_in_to_reply_button'),
            onclick: this.replyAction.bind(discussion, true, false)
          })
          : Button.component({
-            icon: 'reply',
+            icon: 'fa fa-reply',
            children: app.translator.trans('core.forum.discussion_controls.cannot_reply_button'),
            className: 'disabled',
            title: app.translator.trans('core.forum.discussion_controls.cannot_reply_text')
@@ -85,7 +85,7 @@ export default {

    if (discussion.canRename()) {
      items.add('rename', Button.component({
-        icon: 'pencil',
+        icon: 'fa fa-pencil-alt',
        children: app.translator.trans('core.forum.discussion_controls.rename_button'),
        onclick: this.renameAction.bind(discussion)
      }));
@@ -109,7 +109,7 @@ export default {
    if (!discussion.isHidden()) {
      if (discussion.canHide()) {
        items.add('hide', Button.component({
-          icon: 'trash-o',
+          icon: 'far fa-trash-alt',
          children: app.translator.trans('core.forum.discussion_controls.delete_button'),
          onclick: this.hideAction.bind(discussion)
        }));
@@ -117,7 +117,7 @@ export default {
    } else {
      if (discussion.canHide()) {
        items.add('restore', Button.component({
-          icon: 'reply',
+          icon: 'fa fa-reply',
          children: app.translator.trans('core.forum.discussion_controls.restore_button'),
          onclick: this.restoreAction.bind(discussion)
        }));
@@ -125,7 +125,7 @@ export default {

      if (discussion.canDelete()) {
        items.add('delete', Button.component({
-          icon: 'times',
+          icon: 'fa fa-times',
          children: app.translator.trans('core.forum.discussion_controls.delete_forever_button'),
          onclick: this.deleteAction.bind(discussion)
        }));
--- a/js/forum/src/utils/PostControls.js
+++ b/js/forum/src/utils/PostControls.js
@@ -59,7 +59,7 @@ export default {
    if (post.contentType() === 'comment' && post.canEdit()) {
      if (!post.isHidden()) {
        items.add('edit', Button.component({
-          icon: 'pencil',
+          icon: 'fa fa-pencil-alt',
          children: app.translator.trans('core.forum.post_controls.edit_button'),
          onclick: this.editAction.bind(post)
        }));
@@ -84,7 +84,7 @@ export default {
    if (post.contentType() === 'comment' && !post.isHidden()) {
      if (post.canEdit()) {
        items.add('hide', Button.component({
-          icon: 'trash-o',
+          icon: 'far fa-trash-alt',
          children: app.translator.trans('core.forum.post_controls.delete_button'),
          onclick: this.hideAction.bind(post)
        }));
@@ -92,14 +92,14 @@ export default {
    } else {
      if (post.contentType() === 'comment' && post.canEdit()) {
        items.add('restore', Button.component({
-          icon: 'reply',
+          icon: 'fa fa-reply',
          children: app.translator.trans('core.forum.post_controls.restore_button'),
          onclick: this.restoreAction.bind(post)
        }));
      }
      if (post.canDelete()) {
        items.add('delete', Button.component({
-          icon: 'times',
+          icon: 'fa fa-times',
          children: app.translator.trans('core.forum.post_controls.delete_forever_button'),
          onclick: this.deleteAction.bind(post, context)
        }));
--- a/js/forum/src/utils/UserControls.js
+++ b/js/forum/src/utils/UserControls.js
@@ -59,7 +59,7 @@ export default {

    if (user.canEdit()) {
      items.add('edit', Button.component({
-        icon: 'pencil',
+        icon: 'fa fa-pencil-alt',
        children: app.translator.trans('core.forum.user_controls.edit_button'),
        onclick: this.editAction.bind(user)
      }));
@@ -82,7 +82,7 @@ export default {

    if (user.id() !== '1' && user.canDelete()) {
      items.add('delete', Button.component({
-        icon: 'times',
+        icon: 'fa fa-times',
        children: app.translator.trans('core.forum.user_controls.delete_button'),
        onclick: this.deleteAction.bind(user)
      }));