replaced some icons

app/scripts/const/icon-map.js

@@ -4,11 +4,11 @@ const IconMap = [
     'exclamation-triangle',
     'server',
     'thumbtack',
-    'comments-o',
+    'comments',
     'puzzle-piece',
     'edit',
     'plug',
-    'newspaper-o',
+    'newspaper',
     'paperclip',
     'camera',
     'wifi',
@@ -18,10 +18,10 @@ const IconMap = [
     'certificate',
     'bullseye',
     'desktop',
-    'envelope-o',
+    'envelope',
     'cog',
     'clipboard',
-    'paper-plane-o',
+    'paper-plane',
     'tv',
     'bolt',
     'inbox',
@@ -43,7 +43,7 @@ const IconMap = [
     'flask',
     'gamepad',
     'trash',
-    'sticky-note-o',
+    'sticky-note',
     'ban',
     'question-circle',
     'cube',

app/scripts/models/attachment-model.js

@@ -48,7 +48,7 @@ function getIcon(ext) {
         case 'log':
         case 'rtf':
         case 'pem':
-            return 'file-alt-o';
+            return 'file-alt';
         case 'html':
         case 'htm':
         case 'js':
@@ -74,9 +74,9 @@ function getIcon(ext) {
         case 'yml':
         case 'asm':
         case 'bat':
-            return 'file-code-o';
+            return 'file-code';
         case 'pdf':
-            return 'file-pdf-o';
+            return 'file-pdf';
         case 'zip':
         case 'rar':
         case 'bz':
@@ -89,16 +89,16 @@ function getIcon(ext) {
         case 'ace':
         case 'dmg':
         case 'jar':
-            return 'file-archive-o';
+            return 'file-archive';
         case 'doc':
         case 'docx':
-            return 'file-word-o';
+            return 'file-word';
         case 'xls':
         case 'xlsx':
-            return 'file-excel-o';
+            return 'file-excel';
         case 'ppt':
         case 'pptx':
-            return 'file-powerpoint-o';
+            return 'file-powerpoint';
         case 'jpeg':
         case 'jpg':
         case 'png':
@@ -108,7 +108,7 @@ function getIcon(ext) {
         case 'svg':
         case 'ico':
         case 'psd':
-            return 'file-image-o';
+            return 'file-image';
         case 'avi':
         case 'mp4':
         case '3gp':
@@ -117,13 +117,13 @@ function getIcon(ext) {
         case 'mpeg':
         case 'mpg':
         case 'mpe':
-            return 'file-video-o';
+            return 'file-video';
         case 'mp3':
         case 'wav':
         case 'flac':
-            return 'file-audio-o';
+            return 'file-audio';
     }
-    return 'file-o';
+    return 'file';
 }
 
 function getMimeType(ext) {

app/scripts/models/menu/menu-model.js

@@ -69,7 +69,7 @@ class MenuModel extends Model {
             { locTitle: 'menuSetGeneral', icon: 'cog', page: 'general', active: true }
         ]);
         this.shortcutsSection = new MenuSectionModel([
-            { locTitle: 'shortcuts', icon: 'keyboard-o', page: 'shortcuts' }
+            { locTitle: 'shortcuts', icon: 'keyboard', page: 'shortcuts' }
         ]);
         this.pluginsSection = new MenuSectionModel([
             { locTitle: 'plugins', icon: 'puzzle-piece', page: 'plugins' }

app/scripts/views/details/details-view.js

@@ -267,7 +267,7 @@ class DetailsView extends View {
                 if (AutoType.enabled) {
                     moreOptions.push({
                         value: 'auto-type',
-                        icon: 'keyboard-o',
+                        icon: 'keyboard',
                         text: Locale.detAutoTypeSettings
                     });
                 }
@@ -893,7 +893,7 @@ class DetailsView extends View {
             }
         }
         if (AutoType.enabled) {
-            options.push({ value: 'det-auto-type', icon: 'keyboard-o', text: Locale.detAutoType });
+            options.push({ value: 'det-auto-type', icon: 'keyboard', text: Locale.detAutoType });
         }
         Events.emit('show-context-menu', Object.assign(e, { options }));
     }

app/scripts/views/fields/field-view.js

@@ -236,7 +236,7 @@ class FieldView extends View {
         }
 
         if (AutoType.enabled && this.model.sequence) {
-            options.push({ value: 'autotype', icon: 'keyboard-o', text: Locale.detAutoTypeField });
+            options.push({ value: 'autotype', icon: 'keyboard', text: Locale.detAutoTypeField });
         }
 
         const rect = this.$el[0].getBoundingClientRect();

app/scripts/views/icon-select-view.js

@@ -51,9 +51,10 @@ class IconSelectView extends View {
             return;
         }
         this.downloadingFavicon = true;
-        this.$el.find('.icon-select__icon-download>i').addClass('fa-spinner spin');
+        this.$el.find('.icon-select__icon-download>i').addClass('spin');
         this.$el
             .find('.icon-select__icon-download')
+            .addClass('icon-select__icon--progress')
             .removeClass('icon-select__icon--download-error');
         const url = this.getIconUrl(true);
         const img = document.createElement('img');
@@ -62,19 +63,20 @@ class IconSelectView extends View {
         img.onload = () => {
             this.setSpecialImage(img, 'download');
             this.$el.find('.icon-select__icon-download img').remove();
-            this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner spin');
+            this.$el.find('.icon-select__icon-download>i').removeClass('spin');
             this.$el
                 .find('.icon-select__icon-download')
+                .removeClass('icon-select__icon--progress')
                 .addClass('icon-select__icon--custom-selected')
                 .append(img);
             this.downloadingFavicon = false;
         };
         img.onerror = (e) => {
             logger.error('Favicon download error: ' + url, e);
-            this.$el.find('.icon-select__icon-download>i').removeClass('fa-spinner spin');
+            this.$el.find('.icon-select__icon-download>i').removeClass('spin');
             this.$el
                 .find('.icon-select__icon-download')
-                .removeClass('icon-select__icon--custom-selected')
+                .removeClass('icon-select__icon--custom-selected icon-select__icon--progress')
                 .addClass('icon-select__icon--download-error');
             this.downloadingFavicon = false;
         };

app/scripts/views/open-view.js

@@ -803,7 +803,7 @@ class OpenView extends View {
             Alerts.alert({
                 header: Locale.openSelectFile,
                 body: Locale.openSelectFileBody,
-                icon: storage.icon || 'file-alt-o',
+                icon: storage.icon || 'file-alt',
                 buttons: [{ result: '', title: Locale.alertCancel }],
                 esc: '',
                 click: '',

app/scripts/views/settings/settings-file-view.js

@@ -336,7 +336,7 @@ class SettingsFileView extends View {
                     Alerts.alert({
                         header: '',
                         body: '',
-                        icon: storage.icon || 'file-alt-o',
+                        icon: storage.icon || 'file-alt',
                         buttons: [Alerts.buttons.ok, Alerts.buttons.cancel],
                         esc: '',
                         opaque: true,

app/styles/areas/_settings.scss

@@ -58,6 +58,11 @@
         &-post {
             display: none;
         }
+        &-post {
+            margin-left: $tiny-spacing;
+            margin-right: $small-spacing;
+            vertical-align: bottom;
+        }
         cursor: pointer;
         @include mobile {
             line-height: $mobile-back-button-height;

app/styles/base/_icon-font.scss

@@ -61,15 +61,15 @@ $fa-var-cog: next-fa-glyph();
 $fa-var-server: next-fa-glyph();
 $fa-var-file-alt: next-fa-glyph();
 $fa-var-file-alt-o: next-fa-glyph();
-$fa-var-file-code-o: next-fa-glyph();
-$fa-var-file-pdf-o: next-fa-glyph();
-$fa-var-file-archive-o: next-fa-glyph();
-$fa-var-file-word-o: next-fa-glyph();
-$fa-var-file-excel-o: next-fa-glyph();
-$fa-var-file-powerpoint-o: next-fa-glyph();
-$fa-var-file-image-o: next-fa-glyph();
-$fa-var-file-video-o: next-fa-glyph();
-$fa-var-file-audio-o: next-fa-glyph();
+$fa-var-file-code: next-fa-glyph();
+$fa-var-file-pdf: next-fa-glyph();
+$fa-var-file-archive: next-fa-glyph();
+$fa-var-file-word: next-fa-glyph();
+$fa-var-file-excel: next-fa-glyph();
+$fa-var-file-powerpoint: next-fa-glyph();
+$fa-var-file-image: next-fa-glyph();
+$fa-var-file-video: next-fa-glyph();
+$fa-var-file-audio: next-fa-glyph();
 $fa-var-onedrive: next-fa-glyph();
 $fa-var-question: next-fa-glyph();
 $fa-var-sign-out-alt: next-fa-glyph();
@@ -80,7 +80,7 @@ $fa-var-tags: next-fa-glyph();
 $fa-var-th-large: next-fa-glyph();
 $fa-var-trash: next-fa-glyph();
 $fa-var-trash-alt: next-fa-glyph();
-$fa-var-keyboard-o: next-fa-glyph();
+$fa-var-keyboard: next-fa-glyph();
 $fa-var-puzzle-piece: next-fa-glyph();
 $fa-var-usb: next-fa-glyph();
 $fa-var-info: next-fa-glyph();
@@ -89,10 +89,10 @@ $fa-var-key: next-fa-glyph();
 $fa-var-globe: next-fa-glyph();
 $fa-var-exclamation-triangle: next-fa-glyph();
 $fa-var-thumbtack: next-fa-glyph();
-$fa-var-comments-o: next-fa-glyph();
+$fa-var-comments: next-fa-glyph();
 $fa-var-edit: next-fa-glyph();
 $fa-var-plug: next-fa-glyph();
-$fa-var-newspaper-o: next-fa-glyph();
+$fa-var-newspaper: next-fa-glyph();
 $fa-var-paperclip: next-fa-glyph();
 $fa-var-camera: next-fa-glyph();
 $fa-var-wifi: next-fa-glyph();
@@ -103,9 +103,9 @@ $fa-var-barcode: next-fa-glyph();
 $fa-var-certificate: next-fa-glyph();
 $fa-var-bullseye: next-fa-glyph();
 $fa-var-desktop: next-fa-glyph();
-$fa-var-envelope-o: next-fa-glyph();
+$fa-var-envelope: next-fa-glyph();
 $fa-var-clipboard: next-fa-glyph();
-$fa-var-paper-plane-o: next-fa-glyph();
+$fa-var-paper-plane: next-fa-glyph();
 $fa-var-tv: next-fa-glyph();
 $fa-var-inbox: next-fa-glyph();
 $fa-var-save: next-fa-glyph();
@@ -125,6 +125,7 @@ $fa-var-clock: next-fa-glyph();
 $fa-var-search: next-fa-glyph();
 $fa-var-flask: next-fa-glyph();
 $fa-var-gamepad: next-fa-glyph();
+$fa-var-sticky-note: next-fa-glyph();
 $fa-var-sticky-note-o: next-fa-glyph();
 $fa-var-question-circle: next-fa-glyph();
 $fa-var-cube: next-fa-glyph();

app/styles/base/_variables.scss

@@ -17,6 +17,7 @@ $heading-line-height: 1.2;
 $base-border-radius: 1px;
 $base-spacing: $base-line-height * 1em;
 $small-spacing: $base-spacing / 2;
+$tiny-spacing: $small-spacing / 2;
 $base-z-index: 0;
 $base-padding-v: 0.5em;
 $base-padding-h: 1em;

app/styles/common/_icon-select.scss

@@ -33,6 +33,9 @@
                 display: none;
             }
         }
+        &--progress > i:before {
+            content: $fa-var-spinner;
+        }
         &--download-error > i:before {
             content: $fa-var-ban;
         }

app/styles/utils/_back-button.scss

@@ -5,4 +5,9 @@
     right: $base-padding-h;
     padding: $base-padding-v * 2 0 1px 0;
     z-index: 1;
+    &__post {
+        vertical-align: bottom;
+        margin-left: $tiny-spacing;
+        margin-right: $small-spacing;
+    }
 }

app/templates/generator-presets.hbs

@@ -1,6 +1,6 @@
 <div class="gen-ps">
     <div class="back-button">
-        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
+        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left back-button__post"></i>
     </div>
     <div class="scroller">
         <div class="gen-ps__content">

app/templates/grp.hbs

@@ -1,6 +1,6 @@
 <div class="grp">
     <div class="back-button">
-        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
+        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left back-button__post"></i>
     </div>
     <div class="scroller">
         <div class="grp__content">

app/templates/import-csv.hbs

@@ -1,7 +1,7 @@
 <div class="import-csv">
     <div class="import-csv__top">
         <div class="back-button">
-            {{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
+            {{res 'retToApp'}} <i class="fa fa-arrow-circle-left back-button__post"></i>
         </div>
         <h1>{{res 'importCsvTitle'}}</h1>
     </div>

app/templates/settings/settings-about.hbs

@@ -62,7 +62,7 @@
     <h3>Graphics</h3>
     <ul>
         <li><a href="https://fontawesome.com/" target="_blank">fontawesome</a><span class="muted-color">, the iconic SVG, font, and CSS toolkit, </span>
-            <a href="{{licenseLinkApache}}" class="muted-color" target="_blank">CC BY 4.0 License</a></li>
+            <a href="{{licenseLinkApache}}" class="muted-color" target="_blank">CC BY 4.0 License</a> <span class="muted-color">(icons only)</span></li>
     </ul>
 
     <h2>{{res 'setAboutLic'}}</h2>

app/templates/settings/settings-file.hbs

@@ -26,7 +26,7 @@
         <h2>{{res 'setFileSaveTo'}}</h2>
         {{#ifneq storage 'file'}}
         <div class="settings__file-save-to settings__file-save-to-file">
-            <i class="fa fa-file-text-o"></i>{{Res 'file'}}
+            <i class="fa fa-file-alt"></i>{{Res 'file'}}
         </div>
         {{/ifneq}}
         {{#each storageProviders as |prv|}}

app/templates/settings/settings-shortcuts.hbs

@@ -1,5 +1,5 @@
 <div class="settings__content">
-    <h1><i class="fa fa-keyboard-o settings__head-icon"></i> {{res 'setShTitle'}}</h1>
+    <h1><i class="fa fa-keyboard settings__head-icon"></i> {{res 'setShTitle'}}</h1>
     <div><span class="shortcut">{{cmd}}A</span> {{res 'or'}} <span class="shortcut">{{alt}}A</span> {{res 'setShShowAll'}}</div>
     <div><span class="shortcut">{{alt}}C</span> {{res 'setShColors'}}</div>
     <div><span class="shortcut">{{alt}}D</span> {{res 'setShTrash'}}</div>

app/templates/storage-file-list.hbs

@@ -15,7 +15,7 @@
                 {{#each files as |file|}}
                     {{#unless file.dir}}
                     <div class="open-list__file {{#unless file.kdbx}}open-list__file--another{{/unless}}" data-path="{{file.path}}">
-                        <i class="open-list__file-icon fa fa-{{#if file.kdbx}}keeweb{{else}}file-text-o{{/if}}"></i>
+                        <i class="open-list__file-icon fa fa-{{#if file.kdbx}}keeweb{{else}}file-alt-o{{/if}}"></i>
                         <span class="open-list__file-text">{{file.name}}</span>
                     </div>
                     {{/unless}}

app/templates/tag.hbs

@@ -1,6 +1,6 @@
 <div class="tag">
     <div class="back-button">
-        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left"></i>
+        {{res 'retToApp'}} <i class="fa fa-arrow-circle-left back-button__post"></i>
     </div>
     <h1>{{res 'tagTitle'}}</h1>
     <div class="tag__field">