How to Incorporate Font Awesome Icons Into TiddlyWiki 5

Tweet This Post

I have become a regular user of TiddlyWiki and have become so accustomed to using Font Awesome icons in Fargo that I wanted to incorporate the icons into my wikis as well.

After some fiddling around, I finally found out how to do it. I'm going to start with "The Hard Way" in case you want to follow the steps yourself, and then follow with "The Easy Way" in case you want to just start with an "empty" TiddlyWiki html file that has the Font Awesome stylesheet pre-installed.

The Hard Way

Please read the Addendum at the end of this post before attempting "The Hard Way."

In your wiki, click on the More tab; click on System; then click on $:/boot/boot.css

Click on the edit icon (the pencil).

Copy the entire contents of this stylesheet and paste it after the default CSS. In the beginning of the code where it says @font-face, there will be a few instances of the following: url('../. Replace the .. with http://netdna.bootstrapcdn.com/font-awesome/4.0.3.

After you're done, click on the checkmark to save.

Then save your wiki by clicking on the icon that looks like . Now when you open this wiki in your browser, the Font Awesome stylesheet will "boot up." (Note that if you are working offline, the icons will not load because the stylesheet is still making calls to font files.)

The Easy Way

Click here to download an "empty" TiddlyWiki html file with Font Awesome already installed. (Or view the actual wiki here.) Note that it uses TiddlyWiki 5.0.6-beta and Font Awesome 4.0.3, so if either has upgraded since this writing, you will not have the latest version.

How to Use Font Awesome in Your Wiki

In the file referenced above, I added the following to the "Getting Started" Tiddler:

I created that header with the following code:

! <i class="fa fa-star-o"></i> Congratulations! <i class="fa fa-star-o"></i>

Visit the icons page and click on the icon you want to use -- you'll be provided with the code to use. Just copy and paste it into your Tiddler.

Addendum (2014-01-23 1:40 PM)

I just learned on the TiddlyWikiDev google group that it is not necessary to post the stylesheet contents into $:/boot/boot.css. You can create any tiddler, call it whatever you want, post the stylesheet contents, and tag it $:/tags/stylesheet. This stylesheet will also boot up when you open the wiki in the browser. (HT Eric Shulman of Tiddly Tools.) I think an advantage to this approach is that -- if you upgrade by dragging your HTML file into an empty TiddlyWiki -- you don't lose the Font Awesome stylesheet.

Tags: tiddlywiki, font awesome


Last built: Tue, Mar 31, 2015 at 2:05 PM

By Jeffrey Kishner, Thursday, January 23, 2014 at 10:06 AM.