Desktop: Resolves #3137: Switch to Font Awesome as icon library

ElectronClient/gui/ConfigMenuBar.jsx

@@ -10,7 +10,7 @@ function ConfigMenuBarButton(props) {
 
 	return (
 		<button style={style.button} onClick={props.onClick}>
-			<i style={iconStyle} className={`fa ${props.iconName}`}></i>
+			<i style={iconStyle} className={props.iconName}></i>
 			<span style={labelStyle}>{props.label}</span>
 		</button>
 	);

ElectronClient/gui/ConfigScreen.jsx

@@ -217,7 +217,7 @@ class ConfigScreenComponent extends React.Component {
 		const advancedSettingsSectionStyle = { display: 'none' };
 
 		if (advancedSettingComps.length) {
-			const iconName = this.state.showAdvancedSettings ? 'fa fa-toggle-up' : 'fa fa-toggle-down';
+			const iconName = this.state.showAdvancedSettings ? 'fa fa-angle-down' : 'fa fa-angle-right';
 			const advancedSettingsButtonStyle = Object.assign({}, theme.buttonStyle, { marginBottom: 10 });
 			advancedSettingsButton = <button onClick={() => shared.advancedSettingsButton_click(this)} style={advancedSettingsButtonStyle}><i style={{ fontSize: 14 }} className={iconName}></i> {_('Show Advanced Settings')}</button>;
 			advancedSettingsSectionStyle.display = this.state.showAdvancedSettings ? 'block' : 'none';

ElectronClient/gui/Header.jsx

@@ -154,14 +154,14 @@ class HeaderComponent extends React.Component {
 		if (options.iconName) {
 			const iconStyle = {
 				fontSize: Math.round(style.fontSize * 1.1),
-				color: style.color,
+				color: theme.iconColor,
 			};
 			if (options.title) iconStyle.marginRight = 5;
 			if ('undefined' != typeof options.iconRotation) {
 				iconStyle.transition = 'transform 0.15s ease-in-out';
 				iconStyle.transform = `rotate(${options.iconRotation}deg)`;
 			}
-			icon = <i style={iconStyle} className={`fa ${options.iconName}`}></i>;
+			icon = <i style={iconStyle} className={`fas ${options.iconName}`}></i>;
 		}
 
 		const isEnabled = !('enabled' in options) || options.enabled;
@@ -250,7 +250,7 @@ class HeaderComponent extends React.Component {
 		};
 
 		const iconName = state.searchQuery ? 'fa-times' : 'fa-search';
-		const icon = <i style={iconStyle} className={`fa ${iconName}`}></i>;
+		const icon = <i style={iconStyle} className={`fas ${iconName}`}></i>;
 		if (options.onQuery) this.searchOnQuery_ = options.onQuery;
 
 		const usageLink = !this.state.showSearchUsageLink ? null : (

ElectronClient/gui/IconButton.jsx

@@ -9,7 +9,7 @@ class IconButton extends React.Component {
 			color: theme.color,
 			fontSize: theme.fontSize * 1.4,
 		};
-		const icon = <i style={iconStyle} className={`fa ${this.props.iconName}`}></i>;
+		const icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
 
 		const rootStyle = Object.assign(
 			{

ElectronClient/gui/MainScreen.jsx

@@ -785,7 +785,7 @@ class MainScreenComponent extends React.Component {
 
 		headerItems.push({
 			title: _('New note'),
-			iconName: 'fa-file-o',
+			iconName: 'fa-file',
 			enabled: !!folders.length && !onConflictFolder,
 			onClick: () => {
 				this.doCommand({ name: 'newNote' });
@@ -794,7 +794,7 @@ class MainScreenComponent extends React.Component {
 
 		headerItems.push({
 			title: _('New to-do'),
-			iconName: 'fa-check-square-o',
+			iconName: 'fa-check-square',
 			enabled: !!folders.length && !onConflictFolder,
 			onClick: () => {
 				this.doCommand({ name: 'newTodo' });
@@ -811,7 +811,7 @@ class MainScreenComponent extends React.Component {
 
 		headerItems.push({
 			title: _('Code View'),
-			iconName: 'fa-file-code-o ',
+			iconName: 'fa-file-code ',
 			enabled: !!notes.length,
 			type: 'checkbox',
 			checked: this.props.settingEditorCodeView,

ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx

@@ -126,7 +126,7 @@ export default function Toolbar(props:ToolbarProps) {
 
 		toolbarItems.push({
 			tooltip: _('Heading'),
-			iconName: 'fa-header',
+			iconName: 'fa-heading',
 			onClick: () => {
 				props.dispatch({
 					type: 'WINDOW_COMMAND',
@@ -148,7 +148,7 @@ export default function Toolbar(props:ToolbarProps) {
 
 		toolbarItems.push({
 			tooltip: _('Insert Date Time'),
-			iconName: 'fa-calendar-plus-o',
+			iconName: 'fa-calendar-plus',
 			onClick: () => {
 				props.dispatch({
 					type: 'WINDOW_COMMAND',

ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -394,8 +394,8 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 			.tox input,
 			.tox .tox-label,
 			.tox .tox-toolbar-label {
-				color: ${theme.color} !important;
+				color: ${theme.iconColor} !important;
-				fill: ${theme.color} !important;
+				fill: ${theme.iconColor} !important;
 			}
 
 			.tox .tox-statusbar a,
@@ -682,7 +682,7 @@ const TinyMCE = (props:NoteBodyEditorProps, ref:any) => {
 
 	const loadDocumentAssets = (editor:any, pluginAssets:any[]) => {
 		const cssFiles = [
-			'css/fork-awesome.min.css',
+			'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
 			`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
 		].concat(
 			pluginAssets

ElectronClient/gui/NoteList.jsx

@@ -220,7 +220,7 @@ class NoteListComponent extends React.Component {
 			paddingRight: 4,
 			color: theme.color,
 		};
-		const watchedIcon = this.props.watchedNoteFiles.indexOf(item.id) < 0 ? null : <i style={watchedIconStyle} className={'fa fa-external-link'}></i>;
+		const watchedIcon = this.props.watchedNoteFiles.indexOf(item.id) < 0 ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
 
 		if (!this.itemAnchorRefs_[item.id]) this.itemAnchorRefs_[item.id] = React.createRef();
 		const ref = this.itemAnchorRefs_[item.id];

ElectronClient/gui/NotePropertiesDialog.jsx

@@ -322,7 +322,7 @@ class NotePropertiesDialog extends React.Component {
 		if (editCompHandler) {
 			editComp = (
 				<a href="#" onClick={editCompHandler} style={styles.editPropertyButton}>
-					<i className={`fa ${editCompIcon}`} aria-hidden="true"></i>
+					<i className={`fas ${editCompIcon}`} aria-hidden="true"></i>
 				</a>
 			);
 		}

ElectronClient/gui/NoteSearchBar.jsx

@@ -52,7 +52,7 @@ class NoteSearchBarComponent extends React.Component {
 			opacity: isEnabled ? 1.0 : theme.disabledOpacity,
 		};
 
-		const icon = <i style={iconStyle} className={`fa ${iconName}`}></i>;
+		const icon = <i style={iconStyle} className={`fas ${iconName}`}></i>;
 
 		return (
 			<a href="#" style={searchButton} onClick={clickHandler}>

ElectronClient/gui/NoteToolbar/NoteToolbar.tsx

@@ -103,7 +103,7 @@ function useToolbarItems(props:NoteToolbarProps) {
 		// toolbarItems.push({
 		// 	tooltip: _('Click to stop external editing'),
 		// 	title: _('Watching...'),
-		// 	iconName: 'fa-external-link',
+		// 	iconName: 'fa-share-square',
 		// 	onClick: () => {
 		// 		onButtonClick({ name: 'stopExternalEditing' });
 		// 	},
@@ -111,7 +111,7 @@ function useToolbarItems(props:NoteToolbarProps) {
 	} else {
 		// toolbarItems.push({
 		// 	tooltip: _('Edit in external editor'),
-		// 	iconName: 'fa-external-link',
+		// 	iconName: 'fa-share-square',
 		// 	onClick: () => {
 		// 		onButtonClick({ name: 'startExternalEditing' });
 		// 	},
@@ -120,7 +120,7 @@ function useToolbarItems(props:NoteToolbarProps) {
 
 	if (note.is_todo) {
 		const item:any = {
-			iconName: 'fa-clock-o',
+			iconName: 'fa-clock',
 			enabled: !note.todo_completed,
 			onClick: () => {
 				onButtonClick({ name: 'setAlarm' });

ElectronClient/gui/SideBar.jsx

@@ -468,7 +468,7 @@ class SideBarComponent extends React.Component {
 		};
 
 		const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'fa-chevron-right' : 'fa-chevron-down';
-		const expandIcon = <i style={expandIconStyle} className={`fa ${iconName}`}></i>;
+		const expandIcon = <i style={expandIconStyle} className={`fas ${iconName}`}></i>;
 		const expandLink = hasChildren ? (
 			<a style={expandLinkStyle} href="#" folderid={folder.id} onClick={this.onFolderToggleClick_}>
 				{expandIcon}
@@ -558,7 +558,7 @@ class SideBarComponent extends React.Component {
 
 	makeHeader(key, label, iconName, extraProps = {}) {
 		const style = this.style().header;
-		const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={`fa ${iconName}`} />;
+		const icon = <i style={{ fontSize: style.fontSize, marginRight: 5 }} className={`fas ${iconName}`} />;
 
 		if (extraProps.toggleblock || extraProps.onClick) {
 			style.cursor = 'pointer';
@@ -572,7 +572,7 @@ class SideBarComponent extends React.Component {
 		const toggleKey = `${key}IsExpanded`;
 		if (extraProps.toggleblock) {
 			const isExpanded = this.state[toggleKey];
-			toggleIcon = <i className={`fa ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-left'}`} style={{ fontSize: style.fontSize * 0.75, marginRight: 12, marginLeft: 5, marginTop: style.fontSize * 0.125 }}></i>;
+			toggleIcon = <i className={`fas ${isExpanded ? 'fa-chevron-down' : 'fa-chevron-left'}`} style={{ fontSize: style.fontSize * 0.75, marginRight: 12, marginLeft: 5, marginTop: style.fontSize * 0.125 }}></i>;
 		}
 		if (extraProps.selected) {
 			style.backgroundColor = this.style().listItemSelected.backgroundColor;
@@ -712,7 +712,7 @@ class SideBarComponent extends React.Component {
 
 	synchronizeButton(type) {
 		const style = Object.assign({}, this.style().button, { marginBottom: 5 });
-		const iconName = 'fa-refresh';
+		const iconName = 'fa-sync-alt';
 		const label = type === 'sync' ? _('Synchronise') : _('Cancel');
 		const iconStyle = { fontSize: style.fontSize, marginRight: 5 };
 
@@ -720,7 +720,7 @@ class SideBarComponent extends React.Component {
 			iconStyle.animation = 'icon-infinite-rotation 1s linear infinite';
 		}
 
-		const icon = <i style={iconStyle} className={`fa ${iconName}`} />;
+		const icon = <i style={iconStyle} className={`fas ${iconName}`} />;
 		return (
 			<a
 				className="synchronize-button"

ElectronClient/gui/ToolbarButton.jsx

@@ -14,10 +14,10 @@ class ToolbarButton extends React.Component {
 		if (this.props.iconName) {
 			const iconStyle = {
 				fontSize: Math.round(theme.fontSize * 1.5),
-				color: theme.color,
+				color: theme.iconColor,
 			};
 			if (title) iconStyle.marginRight = 5;
-			icon = <i style={iconStyle} className={`fa ${this.props.iconName}`}></i>;
+			icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
 		}
 
 		const isEnabled = !('enabled' in this.props) || this.props.enabled === true;

ElectronClient/gui/style/ConfigMenuBar.js

@@ -20,7 +20,7 @@ const style = createSelector(
 			},
 			buttonIcon: {
 				fontSize: 24,
-				color: theme.colorFaded,
+				color: theme.iconColor,
 			},
 			buttonLabel: {
 				display: 'flex',

ElectronClient/gui/style/theme/aritimDark.js

@@ -1,4 +1,6 @@
 const aritimStyle = {
+	appearance: 'dark',
+
 	backgroundColor: '#10151a', // Main background color
 	backgroundColorTransparent: 'rgba(16, 21, 26, 0.9)', //
 	oddBackgroundColor: '#141a21',

ElectronClient/gui/style/theme/dark.js

@@ -1,4 +1,6 @@
 const darkStyle = {
+	appearance: 'dark',
+
 	backgroundColor: '#1D2024',
 	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
 	oddBackgroundColor: '#dddddd',

ElectronClient/gui/style/theme/dracula.js

@@ -1,4 +1,6 @@
 const draculaStyle = {
+	appearance: 'dark',
+
 	backgroundColor: '#282a36',
 	backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
 	oddBackgroundColor: '#282a36',

ElectronClient/gui/style/theme/nord.js

@@ -45,6 +45,8 @@ const nord = ['#2e3440', '#3b4252', '#434c5e', '#4c566a', '#d8dee9', '#e5e9f0',
 // 2e3440 === rbga(46, 52, 64, 1)
 
 const nordStyle = {
+	appearance: 'dark',
+
 	backgroundColor: nord[0],
 	backgroundColorTransparent: 'rgba(46, 52, 64, 0.9)',
 	oddBackgroundColor: nord[1],

ElectronClient/gui/style/theme/solarizedDark.js

@@ -1,4 +1,6 @@
 const solarizedDarkStyle = {
+	appearance: 'dark',
+
 	backgroundColor: '#002b36',
 	backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
 	oddBackgroundColor: '#073642',

ElectronClient/index.html

@@ -9,7 +9,7 @@
 		-->
 		<title>Joplin</title>
 		<link rel="stylesheet" href="style.css">
-		<link rel="stylesheet" href="css/fork-awesome.min.css">
+		<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
 		<link rel="stylesheet" href="node_modules/react-datetime/css/react-datetime.css">
 		<link rel="stylesheet" href="node_modules/smalltalk/css/smalltalk.css">
 

ElectronClient/package-lock.json

@@ -203,6 +203,11 @@
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.8.2.tgz",
       "integrity": "sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw=="
     },
+    "@fortawesome/fontawesome-free": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz",
+      "integrity": "sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg=="
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@@ -1449,13 +1454,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
           "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "is-glob": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
           "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-extglob": "^1.0.0"
           }
@@ -1943,7 +1950,8 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.1.tgz",
       "integrity": "sha512-HRZPIjPcbwAVQvOTxR4YE3o8Xs98NqbbL1iEZDCz7CL8ql0Lt5iOyJFxfnAB0oFs8Oh02F/lLlg30Mexv46LjA==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "boxen": {
       "version": "4.2.0",
@@ -4971,13 +4979,15 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
           "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "is-glob": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
           "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "is-extglob": "^1.0.0"
           }
@@ -5145,7 +5155,8 @@
               "version": "2.1.1",
               "resolved": false,
               "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -5194,7 +5205,8 @@
               "version": "1.1.0",
               "resolved": false,
               "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -5207,7 +5219,8 @@
               "version": "1.1.0",
               "resolved": false,
               "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -5338,7 +5351,8 @@
               "version": "2.0.4",
               "resolved": false,
               "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -5352,6 +5366,7 @@
               "resolved": false,
               "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -5368,6 +5383,7 @@
               "resolved": false,
               "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -5376,13 +5392,15 @@
               "version": "0.0.8",
               "resolved": false,
               "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.9.0",
               "resolved": false,
               "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -5403,6 +5421,7 @@
               "resolved": false,
               "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -5501,7 +5520,8 @@
               "version": "1.0.1",
               "resolved": false,
               "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -5515,6 +5535,7 @@
               "resolved": false,
               "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -5610,7 +5631,8 @@
               "version": "5.1.2",
               "resolved": false,
               "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -5652,6 +5674,7 @@
               "resolved": false,
               "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -5673,6 +5696,7 @@
               "resolved": false,
               "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -5721,13 +5745,15 @@
               "version": "1.0.2",
               "resolved": false,
               "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "resolved": false,
               "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -8645,7 +8671,8 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
           "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "is-glob": {
           "version": "2.0.1",

ElectronClient/package.json

@@ -94,6 +94,7 @@
     "7zip-bin-win": "^2.1.1"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "app-module-path": "^2.2.0",
     "async-mutex": "^0.1.3",
     "base-64": "^0.1.0",

ElectronClient/theme.js

@@ -30,6 +30,8 @@ const globalStyle = {
 	headerButtonHPadding: 6,
 
 	toolbarHeight: 35,
+
+	appearance: 'light',
 };
 
 globalStyle.marginRight = globalStyle.margin;
@@ -84,6 +86,7 @@ globalStyle.buttonStyle = {
 
 function addExtraStyles(style) {
 	style.selectedDividerColor = Color(style.dividerColor).darken(0.2).hex();
+	style.iconColor = Color(style.color).alpha(0.8);
 
 	style.tagStyle = {
 		fontSize: style.fontSize,
@@ -204,7 +207,7 @@ function addExtraStyles(style) {
 	};
 
 	style.buttonIconStyle = {
-		color: style.color,
+		color: style.iconColor,
 		marginRight: 6,
 	};
 

ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts

@@ -52,7 +52,7 @@ pluginAssets[2] = function(theme:any) {
 
 				ul.joplin-checklist li::before {
 					content:"\\f14a";
-					font-family:ForkAwesome;
+					font-family:"Font Awesome 5 Free";
 					background-size: 16px 16px;
 					pointer-events: all;
 					cursor: pointer;

ReactNativeClient/lib/models/Setting.js

@@ -1085,15 +1085,15 @@ class Setting extends BaseModel {
 	}
 
 	static sectionNameToIcon(name) {
-		if (name === 'general') return 'fa-sliders';
+		if (name === 'general') return 'fas fa-sliders-h';
-		if (name === 'sync') return 'fa-refresh';
+		if (name === 'sync') return 'fas fa-sync-alt';
-		if (name === 'appearance') return 'fa-pencil';
+		if (name === 'appearance') return 'fas fa-pencil-alt';
-		if (name === 'note') return 'fa-file-text-o';
+		if (name === 'note') return 'far fa-file-alt';
-		if (name === 'plugins') return 'fa-puzzle-piece';
+		if (name === 'plugins') return 'fas fa-puzzle-piece';
-		if (name === 'application') return 'fa-cog';
+		if (name === 'application') return 'fas fa-cog';
-		if (name === 'revisionService') return 'fa-archive-org';
+		if (name === 'revisionService') return 'fas fa-history';
-		if (name === 'encryption') return 'fa-key-modern';
+		if (name === 'encryption') return 'fas fa-key';
-		if (name === 'server') return 'fa-hand-scissors-o';
+		if (name === 'server') return 'far fa-hand-scissors';
 		return name;
 	}