Adding FontAwesome Support to Trilium Notes

You know that old joke about the memory being first to go? And I mean that old old joke? That joke…that’s been around for a while…about aging… heh… heheh…

Anyway, in my case, it’s been right. I don’t know if it’s because I caught long COVID and have a permanent brain fog, if my brain is going bad in some other way, or if it’s just because I’m almost 30 and this is the debuff I rolled for this decade. Eventually I’m gonna get it looked at by some professionals. But until then, I’ve been trying to get into the habit of taking more notes on more things more often, while the memory loss is still only as inconvenient as “I don’t remember where I was going with this project”.

The funny thing is, ever since setting up Trilium Notes as my major note taking app, especially with its customization support of “you can literally tinker with the electron/browser based innards”, it’s mostly ended up being more projects about how I take notes.

One of which was extending the existing icon selection with Font Awesome. There is nothing wrong with the existing boxicons support, it just didn’t have a faucet icon, or a pipe, or anything like that I could use as an icon for my Chex Quest mod’s sewer level, and there was nothing stopping me from adding more icons to the list.

Free vs Pro: A Random FontAwesome User Weighs In

I’m currently using the free version of FontAwesome, because I haven’t currently got the kind of income that can survive paying $99/yr for the other twenty thousand something icons. That’s not an attack on their pricing, I’m just broke.

The good news is, this method works just fine as a free user! If you try to use a Pro icon as a free user, Trilium will render a blank icon instead.

Where to Install Stuff

This article already assumes you’ve registered an account with FontAwesome and downloaded the kit. The inside of the archive you have should have a css directory and a webfonts directory. You may or may not also have some JavaScript and SVG files in your download, but you don’t need them.

The first thing you need to figure out is where to put the files you need to make FontAwesome work. Trilium is designed to load “notes”, not files, even for it’s application customization. So, if you haven’t already, you should probably pick a place for your local customization files to live.

Within that location, you should create a new “Book” type note titled “FontAwesome”. Copy the woff2 files from webfonts to this book. You can skip the ttf files to keep your Trilium database a little smaller at the cost of an extra step later. Go into the css directory and copy fontawesome.css, brands.css, regular.css (if you’re a pro user, or for completeness) and solid.css into the same book. You can use the *.min.css files instead if you prefer, of course. The earlier version compatibility files are optional, or at least I didn’t copy them and it’s not causing me any problems.

Each new subnote in this book needs a little bit more work done to make Trilium use them for its own UI:

• Within each CSS file, go to “Owned Attributes” (it’s towards the top under the title box), and add the #appCss label.
• If you chose not to copy the TTF files into your Trilium instance, remove the url() references to the TTF files in the CSS files, just so it doesn’t throw up later.
• Change all the URLs referenced in the CSS files from ../webfonts/${filename} to /custom/fonts/${filename}. Note this path.
• On the actual font files, you need to add a different label: #customResourceProvider="fonts/${filename}" (e.g. “fonts/fa-brands-400.woff2”). Make sure the filename is the original filename of the woff2/ttf file, just so it’s easier for everyone to think about later.
• Finally, reload Trilium’s frontend by pressing F5 (or Ctrl-R, or whichever method is your favorite).

You should now be able to use a FontAwesome icon in your notes. At the moment, I haven’t figured out how to add them to the icon browser, but you can specify them manually: simply look up your icon as usual, get its class value, and define it in the iconClass label, e.g. #iconClass="fa-solid fa-layer-group".