Operating System: Windows 10 Pro x64 22H2 Build 19045.2965
Joplin Version: 2.10.18 (Installed)
I want to replace the default toolbar icons with my own. I have no problems building my own icon font.
Is there a way to override Joplin's use of Icomoon?
I found where the font is being referenced. It's inside of the app.asar file located in the install directory under the resources folder: C:\Program Files\Joplin\resources\app.asar
This file can be extracted by 7zip, and the font is located in style\icons\font and the style.css file that specifies the icons to be used in the toolbar is located in the parent directory: style\icons.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?f410v3');
src: url('fonts/icomoon.eot?f410v3#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?f410v3') format('truetype'),
url('fonts/icomoon.woff?f410v3') format('woff'),
url('fonts/icomoon.svg?f410v3#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-error:before {
content: "\e900";
}
.icon-attention:before {
content: "\e901";
}
.icon-collapse:before {
content: "\e902";
}
.icon-cancel:before {
content: "\e903";
}
.icon-expand:before {
content: "\e904";
}
.icon-notebooks:before {
content: "\e905";
}
.icon-plus:before {
content: "\e906";
}
.icon-update:before {
content: "\e907";
}
.icon-tags:before {
content: "\e908";
}
.icon-search:before {
content: "\e909";
}
.icon-notes:before {
content: "\e90a";
}
.icon-sync:before {
content: "\e90b";
}
.icon-general:before {
content: "\e90c";
}
.icon-note:before {
content: "\e90d";
}
.icon-note-history:before {
content: "\e90e";
}
.icon-application:before {
content: "\e90f";
}
.icon-encryption:before {
content: "\e910";
}
.icon-plugins:before {
content: "\e911";
}
.icon-web-clipper:before {
content: "\e912";
}
.icon-appearance:before {
content: "\e913";
}
.icon-code:before {
content: "\e914";
}
.icon-asterisks:before {
content: "\e915";
}
.icon-bold:before {
content: "\e916";
}
.icon-bulleted-list:before {
content: "\e917";
}
.icon-embed-code:before {
content: "\e918";
}
.icon-back:before {
content: "\e919";
}
.icon-forward:before {
content: "\e91a";
}
.icon-h1:before {
content: "\e91b";
}
.icon-h2:before {
content: "\e91c";
}
.icon-h3:before {
content: "\e91d";
}
.icon-heading:before {
content: "\e91e";
}
.icon-info:before {
content: "\e91f";
}
.icon-italic:before {
content: "\e920";
}
.icon-layout:before {
content: "\e921";
}
.icon-line:before {
content: "\e922";
}
.icon-link:before {
content: "\e923";
}
.icon-more:before {
content: "\e924";
}
.icon-numbered-list:before {
content: "\e925";
}
.icon-quote:before {
content: "\e926";
}
.icon-alarm:before {
content: "\e927";
}
.icon-share:before {
content: "\e928";
}
.icon-table:before {
content: "\e929";
}
.icon-to-do-list:before {
content: "\e92a";
}
.icon-add-date:before {
content: "\e92b";
}
.icon-attachment:before {
content: "\e92c";
}
The problem is that I don't know how to re-compress the file into a modified app.asar. And I encountered several errors when decompressing the file:
Unavailable data : node_modules\7zip-bin-win\index.js
Unavailable data : node_modules\7zip-bin-win\package.json
Unavailable data : node_modules\7zip-bin-win\x64\7za.exe
Unavailable data : node_modules\7zip-bin-win\ia32\7za.exe
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\.prettierrc
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\LICENSE
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\index.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\package.json
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\terminal-notifier-LICENSE
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\snoreToast\LICENSE
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\snoreToast\snoretoast-x86.exe
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\notifu\LICENSE
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\notifu\notifu.exe
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\notifu\notifu64.exe
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Info.plist
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\PkgInfo
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\Terminal.icns
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\Credits.rtf
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\InfoPlist.strings
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\MainMenu.nib
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\MacOS\terminal-notifier
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\notifiers\balloon.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\notifiers\growl.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\notifiers\notificationcenter.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\notifiers\notifysend.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\notifiers\toaster.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\lib\checkGrowl.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\lib\utils.js
Unavailable data : node_modules\@joplin\lib\node_modules\node-notifier\.github\workflows\test.yml
Unavailable data : node_modules\node-notifier\.prettierrc
Unavailable data : node_modules\node-notifier\LICENSE
Unavailable data : node_modules\node-notifier\index.js
Unavailable data : node_modules\node-notifier\package.json
Unavailable data : node_modules\node-notifier\vendor\terminal-notifier-LICENSE
Unavailable data : node_modules\node-notifier\vendor\snoreToast\LICENSE
Unavailable data : node_modules\node-notifier\vendor\snoreToast\snoretoast-x64.exe
Unavailable data : node_modules\node-notifier\vendor\snoreToast\snoretoast-x86.exe
Unavailable data : node_modules\node-notifier\vendor\notifu\LICENSE
Unavailable data : node_modules\node-notifier\vendor\notifu\notifu.exe
Unavailable data : node_modules\node-notifier\vendor\notifu\notifu64.exe
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Info.plist
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\PkgInfo
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\Terminal.icns
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\Credits.rtf
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\InfoPlist.strings
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\Resources\en.lproj\MainMenu.nib
Unavailable data : node_modules\node-notifier\vendor\mac.noindex\terminal-notifier.app\Contents\MacOS\terminal-notifier
Unavailable data : node_modules\node-notifier\notifiers\balloon.js
Unavailable data : node_modules\node-notifier\notifiers\growl.js
Unavailable data : node_modules\node-notifier\notifiers\notificationcenter.js
Unavailable data : node_modules\node-notifier\notifiers\notifysend.js
Unavailable data : node_modules\node-notifier\notifiers\toaster.js
Unavailable data : node_modules\node-notifier\lib\checkGrowl.js
Unavailable data : node_modules\node-notifier\lib\utils.js
Unavailable data : node_modules\node-notifier\.github\workflows\test.yml
So even if there was a way to re-compress back into a new app.asar file, I'm not sure it would work because of these Unavailable Data errors.
Anyway, in short, I'm looking for any kind of solution here.
The only thing I can think of is that maybe that I can override the style definition for the icons (found in the developer tool):
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Maybe I can create a selector in userchrome.css that takes priority over the above, and swap out the font-family with my own. The only problem is that it would have to be installed on my system so the new icons wouldn't be persistent unless the new icon font was installed.
I could really use some tips or advice on how to accomplish this.
Any feedback at all is warmly welcomed!
Jay