Fontawesome replacement font not displaying

Development Plugins
1

I'm going insane trying to get this to work so I'm wondering if anyone has an idea how to accomplish this.

My current little project is a reskin of Joplin to have a go at some Joplin related CSS and getting it published as a plugin theme.
So far it has all gone pretty well, things are looking good (even if the process has been somewhat complicated in many places) however I've got to a point where I'm totally stuck.

The plan is to replace the current fontawesome icons with a new set and no matter what I've tried I just can't get them to display. The dev tools show that it sees my CSS changes to include the font family and the content but it always just comes up blank.

So as an example this is what I have in my chrome.css file taken from the CSS of a webfont I've downloaded (yes I know I don't need the fix for ie but I've just copied verbatim, trimming it down doesn't help either):

@font-face {
  font-family: 'replacement-font';
  src: url('./webfont/replacement-font.eot?16747377');
  src: url('./webfont/replacement-font.eot?16747377#iefix') format('embedded-opentype'),
       url('./webfont/replacement-font.woff2?16747377') format('woff2'),
       url('./webfont/replacement-font.woff?16747377') format('woff'),
       url('./webfont/replacement-font.ttf?16747377') format('truetype'),
       url('./webfont/replacement-font.svg?16747377#replacement-font') format('svg');
  font-weight: normal;
  font-style: normal;
}

My plugin src structure looks like the following:

├── src
│   ├── chrome.css
│   ├── chrome.css.map
│   ├── index.ts
│   ├── manifest.json
│   ├── note.css
│   └── webfont
│       ├── replacement-font.eot
│       ├── replacement-font.svg
│       ├── replacement-font.ttf
│       ├── replacement-font.woff
│       └── replacement-font.woff2

And I'm trying to invoke it using the following CSS:

.fa-plus:before {
  font-family: "replacement-font" !important;
  content: "\e833" !important;
}

The dev tools imply that it might have worked when inspecting that element:

image

but alas nothing shows up.

I've tested the font on a plain html file using exactly the same CSS and it works fine. I'm clearly missing something important here...

2

You're assuming that the path in your .css is relative to the plugin root:

  src: url('./webfont/replacement-font.eot?16747377');
  src: url('./webfont/replacement-font.eot?16747377#iefix') format('embedded-opentype'),
       url('./webfont/replacement-font.woff2?16747377') format('woff2'),
       url('./webfont/replacement-font.woff?16747377') format('woff'),
       url('./webfont/replacement-font.ttf?16747377') format('truetype'),
       url('./webfont/replacement-font.svg?16747377#replacement-font') format('svg');

I'm pretty sure this isn't the case. Also I think it may even be different when you're running dev version of the plugin compared to installing a jpl, though I'm not 100% sure on this one.

1 Like
3

That makes sense, I figured I'd need to work something that when I came to the packaged .jpl version but I'm still doing it as a dev plugin so I can rapidly make proof of concept changes before going full ham on it. I had assumed the dev version was essentially just running out of the folder specified so the path would have been OK.

I'm assuming I need to do something with joplin.plugins.installationdir to get that path and make it relative to that instead.

4

I'm not sure actually. If the css is applied from the main process rather than from a plugin then the current dir will be something else.
Even inside a plugin the working dir isn't the installationDir (or at least wasn't last time I checked) because Joplin copies the main plugin index.js file to the temp dir inside the profile and executes it from there, while other non-code assets remain in the installation dir.

5

Ok so it does work if you pass the full installationdir to it.

e.g. by default mine was /home/me/myplugin/dist/ so placing the full path (/home/me/myplugin/dist/webfont/replacement-font.eot into my src: lines seems to work perfectly and shows the icons.

Next I just need to work out how to pass the result of await joplin.plugins.installationDir(); into my CSS file...

6

I know I'm extremely late to the party, but I've had success embedding a woff2 of my custom icon font directly in the CSS as Base64. A regular woff would work just the same. It looks like this:

@font-face {
   font-family: "mgz_icons";
   src: local("mgz_icons"),
      url("data:@file/octet-stream;base64,d09GMgABAAAAABFEAAsAAAAAJmwAABD2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgXwRCAq+FLE5ATYCJAOBFAtMAAQgBYc6ByAbBB9RlI5WhOCLA9sNRYuxMdpCd+f089ajCJGfW86ZE1gaIcns8LTNf3AoUcLBoY0ODsQCo+awOMQNVoRRoB8Eq5ew1GXoolpdtH/qKvVHekt+JYc2dwFPWs9F... Stripped the rest for length")
         format("woff2");
   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: "mgz_icons" !important;
   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-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";
}

Maybe this will help you with your endeavors. It was pretty easy to set up and works great for giving my notes some additional UI glitter.

Note: To convert between font formats use this: GitHub - google/woff2 - or IcoMoon App - Icon Font, SVG, PDF & PNG Generator

1 Like