Complete removal of font-based Fontawesome icons

Related issue: - uBlockOrigin/uBlock-issues#249
gorhill · Dec 6, 2020 · e559cb7 · e559cb7 · uBlock-user · Dec 7, 2020
1 parent add3fdd
commit e559cb7
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 170 deletions.
diff --git a/src/1p-filters.html b/src/1p-filters.html
@@ -10,7 +10,7 @@
 <link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
 <link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
 
-<link rel="stylesheet" type="text/css" href="css/themes/default.css">
+<link rel="stylesheet" href="css/themes/default.css">
 <link rel="stylesheet" href="css/common.css">
 <link rel="stylesheet" href="css/fa-icons.css">
 <link rel="stylesheet" href="css/dashboard-common.css">
@@ -24,13 +24,13 @@
 <div class="body">
     <div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div>
 
-    <p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters" target="_blank">&#xf05a;</a></p>
+    <p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-My-filters" target="_blank">question-circle</a></p>
     <p>
-        <button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
-        <button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
+        <button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa-icon">check</span><span data-i18n="1pApplyChanges"></span></button>
+        <button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa-icon">undo</span><span data-i18n="genericRevert"></span></button>
         &ensp;
-        <button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
-        <button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
+        <button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa-icon">download-alt</span><span data-i18n="1pImport"></span></button>
+        <button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa-icon">upload-alt</span><span data-i18n="1pExport"></span></button>
     </p>
 </div>
 <div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>

diff --git a/src/advanced-settings.html b/src/advanced-settings.html
@@ -7,17 +7,18 @@
 
 <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 
-<link rel="stylesheet" type="text/css" href="css/themes/default.css">
-<link rel="stylesheet" type="text/css" href="css/common.css">
-<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
-<link rel="stylesheet" type="text/css" href="css/advanced-settings.css">
+<link rel="stylesheet" href="css/themes/default.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
+<link rel="stylesheet" href="css/dashboard-common.css">
+<link rel="stylesheet" href="css/advanced-settings.css">
 <link rel="stylesheet" href="css/codemirror.css">
 <link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
 </head>
 
 <body>
 <div class="body">
-    <p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
+    <p><span data-i18n="advancedSettingsWarning"></span> <a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">info-circle</a>
     <p>
         <button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
 </div>
@@ -27,6 +28,7 @@
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
 
+<script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>

diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
@@ -74,7 +74,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
 .listEntry.toRemove .listname {
     text-decoration: line-through;
     }
-.listEntry .fa,
 .listEntry .fa-icon,
 .listEntry .counts {
     color: var(--fg-0-50);
@@ -83,7 +82,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     font-size: 120%;
     margin: 0 0.2em 0 0;
     }
-.listEntry .fa:hover,
 .listEntry .fa-icon:hover {
     color: inherit;
     fill: inherit;

diff --git a/src/css/common.css b/src/css/common.css
@@ -25,14 +25,6 @@
     src: url('fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2');
 }
 
-/* Usage of FontAwesome is deprecated and will be removed eventually */
-@font-face {
-    font-family: FontAwesome;
-    font-weight: normal;
-    font-style: normal;
-    src: url('fonts/fontawesome-webfont.ttf') format('truetype');
-    }
-
 /**
     Common uBO spacing.
     Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
@@ -59,16 +51,6 @@ body {
     margin: 0;
     padding: 0;
     }
-.fa {
-    display: inline-block;
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-    }
 a {
     color: var(--link-ink);
     }
@@ -134,15 +116,13 @@ button.preferred {
     background-color: var(--button-preferred-surface);
     color: var(--button-preferred-ink);
     }
-button.iconifiable > .fa,
 button.iconifiable > .fa-icon {
     padding-left: 0;
     padding-right: 0.4em;
     }
 button.iconifiable > .fa-icon {
     font-size: 120%;
     }
-body[dir="rtl"] button.iconifiable > .fa,
 body[dir="rtl"] button.iconifiable > .fa-icon {
     padding-left: 0.5em;
     }
@@ -233,7 +213,6 @@ select {
     -webkit-margin-start: 2em;
     }
 @media (max-width: 640px) {
-    button.iconifiable > .fa,
     button.iconifiable > .fa-icon {
         font-size: 1.2rem;
         padding: 0;

diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
@@ -18,24 +18,22 @@ h3 {
 a {
     text-decoration: none;
     }
-.fa.info,
 .fa-icon.info {
     color: var(--fg-icon-info-lvl-0-dimmed);
     fill: var(--fg-icon-info-lvl-0-dimmed);
     font-size: 115%;
     }
-.fa.info:hover,
 .fa-icon.info:hover {
     color: inherit;
     fill: inherit;
     }
-.fa.info.important,
 .fa-icon.info.important {
     color: var(--fg-icon-info-lvl-3-dimmed);
+    fill: var(--fg-icon-info-lvl-3-dimmed);
     }
-.fa.info.important:hover,
 .fa-icon.info.important:hover {
     color: var(--fg-icon-info-lvl-3);
+    fill: var(--fg-icon-info-lvl-3);
     }
 input[type="number"] {
     width: 5em;

diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css
@@ -64,9 +64,6 @@ body:not(.editing) #diff.dirty #commitButton:hover {
     display: flex;
     justify-content: center;
     }
-#ruleFilter .fa {
-    color: var(--fg-0-60);
-    }
 #ruleFilter #diffCollapse {
     padding: 0 0.5em;
     font-size: 150%;

diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css
@@ -34,7 +34,10 @@
     position: absolute;
     visibility: visible;
     }
-.fa-icon.fa-icon-vflipped {
+.fa-icon.fa-icon-hflipped > svg {
+    transform: scale(-1, 1);
+    }
+.fa-icon.fa-icon-vflipped > svg {
     transform: scale(1, -1);
     }
 
@@ -69,10 +72,12 @@
 .fa-icon > .fa-icon_list-alt {
     width: calc(1em * 1792 / 1792);
     }
+.fa-icon > .fa-icon_download-alt,
 .fa-icon > .fa-icon_font,
 .fa-icon > .fa-icon_search,
 .fa-icon > .fa-icon_spinner,
-.fa-icon > .fa-icon_unlink {
+.fa-icon > .fa-icon_unlink,
+.fa-icon > .fa-icon_upload-alt {
     width: calc(1em * 1664 / 1792);
     }
 .fa-icon > .fa-icon_home {
@@ -90,9 +95,14 @@
 .fa-icon > .fa-icon_power-off,
 .fa-icon > .fa-icon_question-circle,
 .fa-icon > .fa-icon_refresh,
-.fa-icon > .fa-icon_sliders {
+.fa-icon > .fa-icon_save,
+.fa-icon > .fa-icon_sliders,
+.fa-icon > .fa-icon_undo {
     width: calc(1em * 1536 / 1792);
     }
+.fa-icon > .fa-icon_arrow-right {
+    width: calc(1em * 1472 / 1792);
+    }
 .fa-icon > .fa-icon_filter {
     width: calc(1em * 1410 / 1792);
     }

diff --git a/src/css/fonts/OFL.txt b/src/css/fonts/OFL.txt
diff --git a/src/css/fonts/fontawesome-webfont.ttf b/src/css/fonts/fontawesome-webfont.ttf
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
@@ -53,9 +53,6 @@ hr {
     margin: 0;
     padding: 0;
     }
-.fa {
-    font-size: 120%;
-    }
 
 #sticky {
     background-color: var(--default-surface);

diff --git a/src/dyna-rules.html b/src/dyna-rules.html
@@ -4,35 +4,35 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>uBlock — Dynamic filtering rules</title>
-<link rel="stylesheet" type="text/css" href="lib/codemirror/lib/codemirror.css">
-<link rel="stylesheet" type="text/css" href="lib/codemirror/addon/merge/merge.css">
+<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
+<link rel="stylesheet" href="lib/codemirror/addon/merge/merge.css">
 
-<link rel="stylesheet" type="text/css" href="css/themes/default.css">
-<link rel="stylesheet" type="text/css" href="css/common.css">
-<link rel="stylesheet" type="text/css" href="css/fa-icons.css">
-<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
-<link rel="stylesheet" type="text/css" href="css/cloud-ui.css">
-<link rel="stylesheet" type="text/css" href="css/dyna-rules.css">
-<link rel="stylesheet" type="text/css" href="css/codemirror.css">
+<link rel="stylesheet" href="css/themes/default.css">
+<link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
+<link rel="stylesheet" href="css/dashboard-common.css">
+<link rel="stylesheet" href="css/cloud-ui.css">
+<link rel="stylesheet" href="css/dyna-rules.css">
+<link rel="stylesheet" href="css/codemirror.css">
 </head>
 
 <body>
 
 <div class="body">
     <div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div>
-    <p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">&#xf05a;</a></p>
+    <p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">info-circle</a></p>
     <div id="diff">
         <div class="tools">
             <div class="ruleActions">
                 <div class="fieldset-header" data-i18n="rulesPermanentHeader"></div>
-                <button type="button" class="iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
-                <button type="button" class="iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
+                <button type="button" class="iconifiable" id="exportButton"><span class="fa-icon">upload-alt</span><span data-i18n="rulesExport"></span></button>
+                <button type="button" class="iconifiable" id="revertButton"><span class="fa-icon">arrow-right</span><span data-i18n="rulesRevert"></span></button>
             </div>
             <div class="ruleActions">
                 <div class="fieldset-header" data-i18n="rulesTemporaryHeader"></div>
-                <button type="button" class="iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
-                <button type="button" class="iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
-                <button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
+                <button type="button" class="iconifiable" id="commitButton"><span class="fa-icon fa-icon-hflipped">arrow-right</span><span data-i18n="rulesCommit"></span></button>
+                <button type="button" class="iconifiable" id="importButton"><span class="fa-icon">download-alt</span><span data-i18n="rulesImport"></span></button>
+                <button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa-icon">save</span><span data-i18n="rulesEditSave"></span></button>
             </div>
             <div id="ruleFilter">
                 <span><span class="fa-icon">filter</span>&nbsp;<input type="search" size="16"></span>&emsp;<span data-i18n="rulesSort"></span>&nbsp;<select><option value="0" selected data-i18n="rulesSortByType"><option value="1" data-i18n="rulesSortBySource"><option value="2" data-i18n="rulesSortByDestination"></select>&emsp;<span id="diffCollapse" class="fa-icon">double-angle-up</span>