Convert legacy icons

diff --git a/com.woltlab.wcf/templates/wysiwygToolbar.tpl b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
index 276f79a30aa743e026c60a225d648e7bd5e8e3ca..881abd65f5f8a50c8b7dc43e2ba17010b4fa9deb 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwygToolbar.tpl
+++ b/com.woltlab.wcf/templates/wysiwygToolbar.tpl
@@ -1,25 +1,25 @@
 buttonOptions = {
-       alignment: { icon: 'fa-align-left', title: '{jslang}wcf.editor.button.alignment{/jslang}' },
-       bold: { icon: 'fa-bold', title: '{jslang}wcf.editor.button.bold{/jslang}' },
-       deleted: { icon: 'fa-strikethrough', title: '{jslang}wcf.editor.button.strikethrough{/jslang}' },
-       format: { icon: 'fa-header', title: '{jslang}wcf.editor.button.format{/jslang}' },
-       html: { icon: 'fa-file-code-o', title: '{jslang}wcf.editor.button.html{/jslang}' },
-       italic: { icon: 'fa-italic', title: '{jslang}wcf.editor.button.italic{/jslang}' },
-       link: { icon: 'fa-link', title: '{jslang}wcf.editor.button.link{/jslang}' },
-       lists: { icon: 'fa-list', title: '{jslang}wcf.editor.button.lists{/jslang}' },
-       redo: { icon: 'fa-repeat', title: '{jslang}wcf.editor.button.redo{/jslang}' },
-       subscript: { icon: 'fa-subscript', title: '{jslang}wcf.editor.button.subscript{/jslang}' },
-       superscript: { icon: 'fa-superscript', title: '{jslang}wcf.editor.button.superscript{/jslang}' },
-       table: { icon: 'fa-table', title: '{jslang}wcf.editor.button.table{/jslang}' },
-       underline: { icon: 'fa-underline', title: '{jslang}wcf.editor.button.underline{/jslang}' },
-       undo: { icon: 'fa-undo', title: '{jslang}wcf.editor.button.undo{/jslang}' },
-       woltlabColor: { icon: 'fa-paint-brush', title: '{jslang}wcf.editor.button.color{/jslang}' },
-       woltlabFont: { icon: 'fa-font', title: '{jslang}wcf.editor.button.font{/jslang}' },
-       woltlabFullscreen: { icon: 'fa-expand', title: '{jslang}wcf.editor.button.fullscreen{/jslang}' },
-       woltlabImage: { icon: 'fa-picture-o', title: '{jslang}wcf.editor.button.image{/jslang}' },
-       woltlabMedia: { icon: 'fa-file-o', title: '{jslang}wcf.editor.button.media{/jslang}' },
-       woltlabQuote: { icon: 'fa-quote-left', title: '{jslang}wcf.editor.button.quote{/jslang}' },
-       woltlabSize: { icon: 'fa-text-height', title: '{jslang}wcf.editor.button.size{/jslang}' }
+       alignment: { icon: 'align-left;false', title: '{jslang}wcf.editor.button.alignment{/jslang}' },
+       bold: { icon: 'bold;false', title: '{jslang}wcf.editor.button.bold{/jslang}' },
+       deleted: { icon: 'strikethrough;false', title: '{jslang}wcf.editor.button.strikethrough{/jslang}' },
+       format: { icon: 'heading;false', title: '{jslang}wcf.editor.button.format{/jslang}' },
+       html: { icon: 'code;false', title: '{jslang}wcf.editor.button.html{/jslang}' },
+       italic: { icon: 'italic;false', title: '{jslang}wcf.editor.button.italic{/jslang}' },
+       link: { icon: 'link;false', title: '{jslang}wcf.editor.button.link{/jslang}' },
+       lists: { icon: 'list;false', title: '{jslang}wcf.editor.button.lists{/jslang}' },
+       redo: { icon: 'arrow-rotate-right;false', title: '{jslang}wcf.editor.button.redo{/jslang}' },
+       subscript: { icon: 'subscript;false', title: '{jslang}wcf.editor.button.subscript{/jslang}' },
+       superscript: { icon: 'superscript;false', title: '{jslang}wcf.editor.button.superscript{/jslang}' },
+       table: { icon: 'table;false', title: '{jslang}wcf.editor.button.table{/jslang}' },
+       underline: { icon: 'underline;false', title: '{jslang}wcf.editor.button.underline{/jslang}' },
+       undo: { icon: 'arrow-rotate-left;false', title: '{jslang}wcf.editor.button.undo{/jslang}' },
+       woltlabColor: { icon: 'paintbrush;false', title: '{jslang}wcf.editor.button.color{/jslang}' },
+       woltlabFont: { icon: 'font;false', title: '{jslang}wcf.editor.button.font{/jslang}' },
+       woltlabFullscreen: { icon: 'expand;false', title: '{jslang}wcf.editor.button.fullscreen{/jslang}' },
+       woltlabImage: { icon: 'image;false', title: '{jslang}wcf.editor.button.image{/jslang}' },
+       woltlabMedia: { icon: 'file;false', title: '{jslang}wcf.editor.button.media{/jslang}' },
+       woltlabQuote: { icon: 'quote-left;true', title: '{jslang}wcf.editor.button.quote{/jslang}' },
+       woltlabSize: { icon: 'text-height;false', title: '{jslang}wcf.editor.button.size{/jslang}' }
 };
 
 buttonMobile = ['format', 'bold', 'italic', 'underline', 'lists', 'link', 'woltlabImage'];

diff --git a/wcfsetup/install/files/acp/js/WCF.ACP.js b/wcfsetup/install/files/acp/js/WCF.ACP.js
index a72c8acc717b6b3d360f40114fb71be8568be25c..dbca7251c589078a4bd113469727522a7b82377b 100644 (file)
--- a/wcfsetup/install/files/acp/js/WCF.ACP.js
+++ b/wcfsetup/install/files/acp/js/WCF.ACP.js
@@ -803,7 +803,12 @@ WCF.ACP.Package.Update.Search = Class.extend({
                this._dialog = null;
                
                if (!bindOnExistingButtons === true) {
-                       $('<li><a href="#" class="button jsButtonSearchForUpdates"><span class="icon icon16 fa-refresh"></span> <span>' + WCF.Language.get('wcf.acp.package.searchForUpdates') + '</span></a></li>').prependTo($('.contentHeaderNavigation > ul'));
+                       $(`<li>
+                               <button class="button jsButtonSearchForUpdates">
+                                       <fa-icon size="16" name="arrows-rotate"></fa-icon>
+                                       <span>${WCF.Language.get('wcf.acp.package.searchForUpdates')}</span>
+                               </button>
+                       </li>`).prependTo($('.contentHeaderNavigation > ul'));
                }
                
                this._button = elBySel('.jsButtonSearchForUpdates');
@@ -904,7 +909,12 @@ WCF.ACP.PluginStore.PurchasedItems.Search = Class.extend({
                        success: $.proxy(this._success, this)
                });
                
-               var $button = $('<li><a class="button"><span class="icon icon16 fa-shopping-cart" /> <span>' + WCF.Language.get('wcf.acp.pluginStore.purchasedItems.button.search') + '</span></a></li>');
+               var $button = $(`<li>
+                       <button class="button">
+                               <fa-icon size="16" name="cart-shopping"></fa-icon>
+                               <span>${WCF.Language.get('wcf.acp.pluginStore.purchasedItems.button.search')}</span>
+                       </button>
+               </li>`);
                $button.prependTo($('.contentHeaderNavigation > ul')).click($.proxy(this._click, this));
        },
        

diff --git a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
index 276f79a30aa743e026c60a225d648e7bd5e8e3ca..881abd65f5f8a50c8b7dc43e2ba17010b4fa9deb 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwygToolbar.tpl
@@ -1,25 +1,25 @@
 buttonOptions = {
-       alignment: { icon: 'fa-align-left', title: '{jslang}wcf.editor.button.alignment{/jslang}' },
-       bold: { icon: 'fa-bold', title: '{jslang}wcf.editor.button.bold{/jslang}' },
-       deleted: { icon: 'fa-strikethrough', title: '{jslang}wcf.editor.button.strikethrough{/jslang}' },
-       format: { icon: 'fa-header', title: '{jslang}wcf.editor.button.format{/jslang}' },
-       html: { icon: 'fa-file-code-o', title: '{jslang}wcf.editor.button.html{/jslang}' },
-       italic: { icon: 'fa-italic', title: '{jslang}wcf.editor.button.italic{/jslang}' },
-       link: { icon: 'fa-link', title: '{jslang}wcf.editor.button.link{/jslang}' },
-       lists: { icon: 'fa-list', title: '{jslang}wcf.editor.button.lists{/jslang}' },
-       redo: { icon: 'fa-repeat', title: '{jslang}wcf.editor.button.redo{/jslang}' },
-       subscript: { icon: 'fa-subscript', title: '{jslang}wcf.editor.button.subscript{/jslang}' },
-       superscript: { icon: 'fa-superscript', title: '{jslang}wcf.editor.button.superscript{/jslang}' },
-       table: { icon: 'fa-table', title: '{jslang}wcf.editor.button.table{/jslang}' },
-       underline: { icon: 'fa-underline', title: '{jslang}wcf.editor.button.underline{/jslang}' },
-       undo: { icon: 'fa-undo', title: '{jslang}wcf.editor.button.undo{/jslang}' },
-       woltlabColor: { icon: 'fa-paint-brush', title: '{jslang}wcf.editor.button.color{/jslang}' },
-       woltlabFont: { icon: 'fa-font', title: '{jslang}wcf.editor.button.font{/jslang}' },
-       woltlabFullscreen: { icon: 'fa-expand', title: '{jslang}wcf.editor.button.fullscreen{/jslang}' },
-       woltlabImage: { icon: 'fa-picture-o', title: '{jslang}wcf.editor.button.image{/jslang}' },
-       woltlabMedia: { icon: 'fa-file-o', title: '{jslang}wcf.editor.button.media{/jslang}' },
-       woltlabQuote: { icon: 'fa-quote-left', title: '{jslang}wcf.editor.button.quote{/jslang}' },
-       woltlabSize: { icon: 'fa-text-height', title: '{jslang}wcf.editor.button.size{/jslang}' }
+       alignment: { icon: 'align-left;false', title: '{jslang}wcf.editor.button.alignment{/jslang}' },
+       bold: { icon: 'bold;false', title: '{jslang}wcf.editor.button.bold{/jslang}' },
+       deleted: { icon: 'strikethrough;false', title: '{jslang}wcf.editor.button.strikethrough{/jslang}' },
+       format: { icon: 'heading;false', title: '{jslang}wcf.editor.button.format{/jslang}' },
+       html: { icon: 'code;false', title: '{jslang}wcf.editor.button.html{/jslang}' },
+       italic: { icon: 'italic;false', title: '{jslang}wcf.editor.button.italic{/jslang}' },
+       link: { icon: 'link;false', title: '{jslang}wcf.editor.button.link{/jslang}' },
+       lists: { icon: 'list;false', title: '{jslang}wcf.editor.button.lists{/jslang}' },
+       redo: { icon: 'arrow-rotate-right;false', title: '{jslang}wcf.editor.button.redo{/jslang}' },
+       subscript: { icon: 'subscript;false', title: '{jslang}wcf.editor.button.subscript{/jslang}' },
+       superscript: { icon: 'superscript;false', title: '{jslang}wcf.editor.button.superscript{/jslang}' },
+       table: { icon: 'table;false', title: '{jslang}wcf.editor.button.table{/jslang}' },
+       underline: { icon: 'underline;false', title: '{jslang}wcf.editor.button.underline{/jslang}' },
+       undo: { icon: 'arrow-rotate-left;false', title: '{jslang}wcf.editor.button.undo{/jslang}' },
+       woltlabColor: { icon: 'paintbrush;false', title: '{jslang}wcf.editor.button.color{/jslang}' },
+       woltlabFont: { icon: 'font;false', title: '{jslang}wcf.editor.button.font{/jslang}' },
+       woltlabFullscreen: { icon: 'expand;false', title: '{jslang}wcf.editor.button.fullscreen{/jslang}' },
+       woltlabImage: { icon: 'image;false', title: '{jslang}wcf.editor.button.image{/jslang}' },
+       woltlabMedia: { icon: 'file;false', title: '{jslang}wcf.editor.button.media{/jslang}' },
+       woltlabQuote: { icon: 'quote-left;true', title: '{jslang}wcf.editor.button.quote{/jslang}' },
+       woltlabSize: { icon: 'text-height;false', title: '{jslang}wcf.editor.button.size{/jslang}' }
 };
 
 buttonMobile = ['format', 'bold', 'italic', 'underline', 'lists', 'link', 'woltlabImage'];

diff --git a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
index 94a2615b96f56e717fdcade52931b14e4cd88df6..c8ce014822fd09bb5a1e4549896db55a81772ee3 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor2/plugins/WoltLabButton.js
@@ -61,11 +61,24 @@ $.Redactor.prototype.WoltLabButton = function() {
                                }
                                
                                icon = buttonData.icon;
-                               iconIsImage = (!icon.match(/^fa-/) && icon.match(/\.(gif|jpe?g|png|svg)$/));
+                               iconIsImage = icon.match(/\.(gif|jpe?g|png|svg)$/);
                                
                                // set icon
-                               //noinspection CssUnknownTarget
-                               this.button.setIcon(button, '<span class="icon icon16 ' + (iconIsImage ? 'redactorButtonImage' : icon) + '"' + (iconIsImage ? ' style="background-image: url(\'' + WCF_PATH + 'icon/' + icon + '\')"' : '') + '></span>');
+                               if (iconIsImage) {
+                                       this.button.setIcon(button, `<img class="redactorButtonImage" src="${WCF_PATH}icon/${icon}" height="16" width="16" alt="">`);
+                               } else{
+                                       if (icon.includes(";")) {
+                                               const [iconName, forceSolid] = icon.split(";", 2);
+                                               if (forceSolid === "true") {
+                                                       this.button.setIcon(button, `<fa-icon size="16" name="${iconName}" solid></fa-icon>`);
+                                               } else{
+                                                       this.button.setIcon(button, `<fa-icon size="16" name="${iconName}"></fa-icon>`);
+                                               }
+                                       } else {
+                                               this.button.setIcon(button, '<span style="background-color: #f0c; border-radius: 3px; color: #fff;"><fa-icon size="16" name="question"></fa-icon></span>');
+                                       }
+                               }
+
                                if (!button[0]) {
                                        throw new Error("Missing button element for '" + buttonName + "'.");
                                }

diff --git a/wcfsetup/install/files/js/WCF.Attachment.js b/wcfsetup/install/files/js/WCF.Attachment.js
index b6b28ce0834711959dfbdda8e4f236d22f0b4461..c01ff782c10083bec623808e52dbd97f3f85ee9c 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Attachment.js
+++ b/wcfsetup/install/files/js/WCF.Attachment.js
@@ -488,7 +488,7 @@ WCF.Attachment.Upload = WCF.Upload.extend({
         * @see        WCF.Upload._initFile()
         */
        _initFile: function (file) {
-               var $li = $('<li class="box64 formAttachmentListItem"><span class="icon icon64 fa-spinner" /><div><div><p>' + WCF.String.escapeHTML(file.name) + '</p><small><progress max="100"></progress></small></div><ul></ul></div></li>').data('filename', file.name);
+               var $li = $('<li class="box64 formAttachmentListItem"><fa-icon size="64" name="spinner"></fa-icon><div><div><p>' + WCF.String.escapeHTML(file.name) + '</p><small><progress max="100"></progress></small></div><ul></ul></div></li>').data('filename', file.name);
                this._fileListSelector.append($li);
                this._fileListSelector.show();
                
@@ -498,7 +498,8 @@ WCF.Attachment.Upload = WCF.Upload.extend({
                        $li.find('progress').remove();
                        
                        // upload icon
-                       $li.children('.fa-spinner').removeClass('fa-spinner').addClass('fa-ban');
+                       const icon = $li[0].querySelector("fa-icon");
+                       icon.setIcon("ban");
                        
                        // error message
                        $li.find('div > div').append($('<small class="innerError">' + WCF.Language.get('wcf.attachment.upload.error.tooLarge') + '</small>'));

diff --git a/wcfsetup/install/files/js/WCF.Comment.js b/wcfsetup/install/files/js/WCF.Comment.js
index f660cfda84def3ca860f54edbe5b9f6d959d9528..b05a5fa0b7c4491cba25fc26389cf6379a8d7635 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Comment.js
+++ b/wcfsetup/install/files/js/WCF.Comment.js
@@ -419,12 +419,22 @@ WCF.Comment.Handler = Class.extend({
                }
                
                if (comment.data('canEdit')) {
-                       var $editButton = $('<li><a href="#" class="jsCommentEditButton jsTooltip" title="' + WCF.Language.get('wcf.global.button.edit') + '"><span class="icon icon16 fa-pencil" /> <span class="invisible">' + WCF.Language.get('wcf.global.button.edit') + '</span></a></li>');
+                       var $editButton = $(`<li>
+                               <button class="jsCommentEditButton jsTooltip" title="${WCF.Language.get('wcf.global.button.edit')}">
+                                       <fa-icon size="16" name="pencil"></fa-icon>
+                                       <span class="invisible">${WCF.Language.get('wcf.global.button.edit')}</span>
+                               </button>
+                       </li>`);
                        $editButton.appendTo(comment.find('ul.buttonList:eq(0)'));
                }
                
                if (comment.data('canDelete')) {
-                       var $deleteButton = $('<li><a href="#" class="jsTooltip" title="' + WCF.Language.get('wcf.global.button.delete') + '"><span class="icon icon16 fa-times" /> <span class="invisible">' + WCF.Language.get('wcf.global.button.delete') + '</span></a></li>');
+                       var $deleteButton = $(`<li>
+                               <button class="jsTooltip" title="${WCF.Language.get('wcf.global.button.delete')}">
+                                       <fa-icon size="16" name="xmark"></fa-icon>
+                                       <span class="invisible">${WCF.Language.get('wcf.global.button.delete')}</span>
+                               </button>
+                       </li>`);
                        $deleteButton.data('commentID', commentID).appendTo(comment.find('ul.buttonList:eq(0)')).click($.proxy(this._delete, this));
                }
                
@@ -532,12 +542,22 @@ WCF.Comment.Handler = Class.extend({
         */
        _initResponse: function(responseID, response) {
                if (response.data('canEdit')) {
-                       var $editButton = $('<li><a href="#" class="jsCommentResponseEditButton jsTooltip" title="' + WCF.Language.get('wcf.global.button.edit') + '"><span class="icon icon16 fa-pencil" /> <span class="invisible">' + WCF.Language.get('wcf.global.button.edit') + '</span></a></li>');
+                       var $editButton = $(`<li>
+                               <button class="jsCommentResponseEditButton jsTooltip" title="${WCF.Language.get('wcf.global.button.edit')}">
+                                       <fa-icon size="16" name="pencil"></fa-icon>
+                                       <span class="invisible">${WCF.Language.get('wcf.global.button.edit')}</span>
+                               </button>
+                       </li>`);
                        $editButton.data('responseID', responseID).appendTo(response.find('ul.buttonList:eq(0)'));
                }
                
                if (response.data('canDelete')) {
-                       var $deleteButton = $('<li><a href="#" class="jsTooltip" title="' + WCF.Language.get('wcf.global.button.delete') + '"><span class="icon icon16 fa-times" /> <span class="invisible">' + WCF.Language.get('wcf.global.button.delete') + '</span></a></li>');
+                       var $deleteButton = $(`<li>
+                               <button class="jsTooltip" title="${WCF.Language.get('wcf.global.button.delete')}">
+                                       <fa-icon size="16" name="xmark"></fa-icon>
+                                       <span class="invisible">${WCF.Language.get('wcf.global.button.delete')}</span>
+                               </button>
+                       </li>`);
                        
                        var self = this;
                        $deleteButton.data('responseID', responseID).appendTo(response.find('ul.buttonList:eq(0)')).click(function(event) { self._delete(event, true); });

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index 0fcd4ab604dc621d8a7e310151d436f305d4d7f4..6157be4d0de75962456100ab76e02e8a8d92ebd1 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ImageViewer.js
+++ b/wcfsetup/install/files/js/WCF.ImageViewer.js
@@ -895,11 +895,11 @@ $.widget('ui.wcfImageViewer', {
                var $imageContainer = $('<div><img /><img /></div>').appendTo(this._container);
                var $imageList = $('<footer><span class="wcfImageViewerButtonPrevious icon fa-angle-double-left" /><div><ul /></div><span class="wcfImageViewerButtonNext icon fa-angle-double-right" /></footer>').appendTo(this._container);
                var $slideshowContainer = $('<ul />').appendTo($imageContainer);
-               var $slideshowButtonPrevious = $('<li class="wcfImageViewerSlideshowButtonPrevious"><span class="icon icon48 fa-angle-left" /></li>').appendTo($slideshowContainer);
-               var $slideshowButtonToggle = $('<li class="wcfImageViewerSlideshowButtonToggle pointer"><span class="icon icon48 fa-play" /></li>').appendTo($slideshowContainer);
-               var $slideshowButtonNext = $('<li class="wcfImageViewerSlideshowButtonNext"><span class="icon icon48 fa-angle-right" /></li>').appendTo($slideshowContainer);
-               var $slideshowButtonEnlarge = $('<li class="wcfImageViewerSlideshowButtonEnlarge pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.enlarge') + '"><span class="icon icon48 fa-expand" /></li>').appendTo($slideshowContainer);
-               var $slideshowButtonFull = $('<li class="wcfImageViewerSlideshowButtonFull pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.full') + '"><span class="icon icon48 fa-external-link" /></li>').appendTo($slideshowContainer);
+               var $slideshowButtonPrevious = $('<li class="wcfImageViewerSlideshowButtonPrevious"><fa-icon size="48" name="angle-left"></fa-icon></li>').appendTo($slideshowContainer);
+               var $slideshowButtonToggle = $('<li class="wcfImageViewerSlideshowButtonToggle pointer"><fa-icon size="48" name="play"></fa-icon></li>').appendTo($slideshowContainer);
+               var $slideshowButtonNext = $('<li class="wcfImageViewerSlideshowButtonNext"><fa-icon size="48" name="angle-right"></fa-icon></li>').appendTo($slideshowContainer);
+               var $slideshowButtonEnlarge = $('<li class="wcfImageViewerSlideshowButtonEnlarge pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.enlarge') + '"><fa-icon size="48" name="expand"></fa-icon></li>').appendTo($slideshowContainer);
+               var $slideshowButtonFull = $('<li class="wcfImageViewerSlideshowButtonFull pointer jsTooltip" title="' + WCF.Language.get('wcf.imageViewer.button.full') + '"><fa-icon size="48" name="arrow-up-right-from-square"></fa-icon></li>').appendTo($slideshowContainer);
                
                this._ui = {
                        buttonNext: $imageList.children('span.wcfImageViewerButtonNext'),
@@ -943,7 +943,9 @@ $.widget('ui.wcfImageViewer', {
                $slideshowButtonFull.click(function(event) { window.location = $(event.currentTarget).data('link'); });
                
                // close button
-               $('<span class="wcfImageViewerButtonClose icon icon48 fa-times pointer jsTooltip" title="' + WCF.Language.get('wcf.global.button.close') + '" />').appendTo(this._ui.header).click($.proxy(this.close, this));
+               $(`<button class="wcfImageViewerButtonClose jsTooltip" title="${WCF.Language.get('wcf.global.button.close')}">
+                       <fa-icon size="48" name="xmark"></fa-icon>
+               </button>`).appendTo(this._ui.header).click($.proxy(this.close, this));
                
                if (!$.browser.mobile) {
                        // clicking on the inner container should close the dialog, but it should not be available on mobile due to

diff --git a/wcfsetup/install/files/js/WCF.Poll.js b/wcfsetup/install/files/js/WCF.Poll.js
index 6419fa0be3ca1733a5459597dd5d93adbf83db8c..b229b7844643c7b4533a8efccff4e4240bcb7c6e 100644 (file)
--- a/wcfsetup/install/files/js/WCF.Poll.js
+++ b/wcfsetup/install/files/js/WCF.Poll.js
@@ -127,9 +127,9 @@ if (COMPILER_TARGET_DEFAULT) {
 
                        // insert buttons
                        var $container = $('<div class="pollOptionInput" />').appendTo($listItem);
-                       $('<span class="icon icon16 fa-arrows sortableNodeHandle" />').appendTo($container);
-                       $('<a role="button" href="#" class="icon icon16 fa-plus jsTooltip jsAddOption pointer" title="' + WCF.Language.get('wcf.poll.button.addOption') + '" />').click($.proxy(this._addOption, this)).appendTo($container);
-                       $('<a role="button" href="#" class="icon icon16 fa-times jsTooltip jsDeleteOption pointer" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '" />').click($.proxy(this._removeOption, this)).appendTo($container);
+                       $('<span class="sortableNodeHandle"><fa-icon size="16" name="arrows-up-down-left-right"></fa-icon></span>').appendTo($container);
+                       $('<button class="jsTooltip jsAddOption" title="' + WCF.Language.get('wcf.poll.button.addOption') + '"><fa-icon size="16" name="plus"></fa-icon></button>').click($.proxy(this._addOption, this)).appendTo($container);
+                       $('<button class="jsTooltip jsDeleteOption" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '"><fa-icon size="16" name="xmark"></fa-icon></button>').click($.proxy(this._removeOption, this)).appendTo($container);
 
                        // insert input field
                        var $input = $('<input type="text" value="' + optionValue + '" maxlength="255" />').keydown($.proxy(this._keyDown, this)).appendTo($container);

diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js
index 0bd48341ddce77b87a9b15a3a375b1600e47d906..cea27d99a1e92effd874754cfcffff87479376a8 100644 (file)
--- a/wcfsetup/install/files/js/WCF.User.js
+++ b/wcfsetup/install/files/js/WCF.User.js
@@ -1012,7 +1012,9 @@ if (COMPILER_TARGET_DEFAULT) {
                                if (!$item.data('isRead')) {
                                        $item.find('a:not(.userLink)').prop('href', $item.data('link'));
                                        
-                                       var $markAsConfirmed = $('<a href="#" class="icon icon24 fa-check notificationItemMarkAsConfirmed jsTooltip" title="' + WCF.Language.get('wcf.global.button.markAsRead') + '" />').appendTo($item);
+                                       var $markAsConfirmed = $(`<button class="notificationItemMarkAsConfirmed jsTooltip" title="${WCF.Language.get('wcf.global.button.markAsRead')}">
+                                               <fa-icon size="24" name="check"></fa-icon>
+                                       </button>`).appendTo($item);
                                        $markAsConfirmed.click($.proxy(this._markAsConfirmed, this));
                                }
                        }).bind(this));

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 8c9016233022a1dc5a4096db1db1ff46e8a4b9e1..84d81bc45e7730943fa1c9a63904efd024aa3d04 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -2547,7 +2547,9 @@ WCF.Collapsible.Remote = Class.extend({
                        $button = $($button);
                }
                else {
-                       $button = $('<span class="collapsibleButton jsTooltip pointer icon icon16 fa-chevron-down" title="' + WCF.Language.get('wcf.global.button.collapsible') + '">').prependTo(buttonContainer);
+                       $button = $(`<button class="collapsibleButton jsToolti" title="${WCF.Language.get('wcf.global.button.collapsible')}">
+                               <fa-icon size="16" name="chevron-down"></fa-icon>
+                       </button>`).prependTo(buttonContainer);
                }
                
                $button.data('containerID', containerID).click($.proxy(this._toggleContainer, this));
@@ -4049,7 +4051,7 @@ WCF.Search.User = WCF.Search.Base.extend({
                        $icon = $(item.icon);
                }
                else if (this._includeUserGroups && item.type === 'group') {
-                       $icon = $('<span class="icon icon16 fa-users" />');
+                       $icon = $('<fa-icon size="16" name="users"></fa-icon>');
                }
                
                if ($icon) {
@@ -6548,7 +6550,7 @@ $.widget('ui.wcfSlideshow', {
                // create toggle buttons
                this._buttonList = $('<ul class="slideshowButtonList" />').appendTo(this.element);
                for (var $i = 0; $i < this._count; $i++) {
-                       var $link = $('<li><a><span class="icon icon16 fa-circle" /></a></li>').data('index', $i).click($.proxy(this._click, this)).appendTo(this._buttonList);
+                       var $link = $('<li><a><fa-icon size="16" name="circle"></fa-icon></a></li>').data('index', $i).click($.proxy(this._click, this)).appendTo(this._buttonList);
                        if ($i == 0) {
                                $link.find('.icon').addClass('active');
                        }

diff --git a/wcfsetup/install/files/style/ui/redactor.scss b/wcfsetup/install/files/style/ui/redactor.scss
index 79c53d2da7dc17f80bd71356ee964f02c74f75b4..f3a3606ccdce9477e2af4b3b783c3c7feae7663a 100644 (file)
--- a/wcfsetup/install/files/style/ui/redactor.scss
+++ b/wcfsetup/install/files/style/ui/redactor.scss
@@ -210,16 +210,6 @@
                                color: $wcfHeaderMenuLinkActive;
                        }
 
-                       .icon {
-                               color: inherit;
-                               cursor: inherit !important;
-
-                               &.redactorButtonImage {
-                                       background: no-repeat center center;
-                                       background-size: contain;
-                               }
-                       }
-
                        @include screen-lg {
                                // hover-styles on mobile are misleading as they stay much longer
                                // due to the click-like behavior