Hi all,
I have been working on my own custom theme and managed to get a custom icon font rendering using the following code:
@font-face {
font-family: "mgz_icons" !important;
src: local("mgz_icons"), url('data:@file/octet-stream;base64,d09GMgABAAAAABFEAAsAAAAAJmwAdzlh2wBAA=='),
format("woff2") !important;
font-weight: normal !important;
font-style: normal !important;
font-display: block !important;
}
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "mgz_icons" !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-apps:before { content: "\e817"; }
.icon-device-tablet:before { content: "\e886"; }
.icon-download-circle-o:before { content: "\e8b9"; }
.icon-upload-circle-o:before { content: "\e8bc"; }
.icon-plus-square:before { content: "\e8cc"; }
.icon-minus-square:before { content: "\e8cd"; }
.icon-collapse:before { content: "\e8ef"; }
.icon-expand:before { content: "\e8f0"; }
.icon-plus-circle-o:before { content: "\e8f7"; }
.icon-redo:before { content: "\e905"; }
.icon-ban:before { content: "\e906"; }
.icon-calendar:before { content: "\e908"; }
.icon-chain-broken:before { content: "\e90c"; }
.icon-check-circle-o:before { content: "\e90d"; }
.icon-undo:before { content: "\e911"; }
.icon-cog:before { content: "\e916"; }
.icon-envelope:before { content: "\e91c"; }
.icon-info-circle:before { content: "\e926"; }
.icon-link:before { content: "\e927"; }
.icon-plus-circle:before { content: "\e92d"; }
.icon-zoom-in-bold:before { content: "\e92e"; }
.icon-close-circle:before { content: "\e93a"; }
.icon-trash-o:before { content: "\e93b"; }
.icon-help:before { content: "\e941"; }
.icon-help-o:before { content: "\e942"; }
.icon-zoom-out-bold:before { content: "\e943"; }
.icon-minus-circle:before { content: "\e946"; }
.icon-minus-circle-o:before { content: "\e947"; }
.icon-search-bold:before { content: "\e94a"; }
.icon-globe:before { content: "\e97b"; }
.icon-info:before { content: "\e98f"; }
.icon-warning-full:before { content: "\e9b5"; }
.icon-unread:before { content: "\e9ba"; }
But today for some reason I can't fathom, it just stopped working.
The glyphs just aren't rendering:
Do any of you know why this could happen? The font is literally embedded in the css file. Is there a more fool-proof way to use icon fonts in Joplin?
What gets me is that it was working perfectly before.
Any help greatly appreciated.
