Integrating font-awesome library into a local tiddlywiki - help needed

[XYZ]

This is a way to embed the online font-awesome library by typing the following code into a tiddler and adding the system tag $:/tags/RawMarkup

< link href = "https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.2/css/all.css" rel = "stylesheet" >

Use methods to add to other tiddlers in the same tiddlywiki

<i class="fa-solid fa-house"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-solid fa-link"></i>
<i class="fa-solid fa-comment"></i>
<i class="fa-brands fa-chrome"></i>
<i class="fa-solid fa-satellite"></i>
<i class="fa-solid fa-file-invoice-dollar"></i>
<i class="fa-solid fa-list"></i>
<i class="fa-brands fa-git"></i>
<i class="fa-solid fa-server"></i>
<i class="fa-brands fa-npm"></i>
<i class="fa-solid fa-download"></i>
<i class="fa-solid fa-laptop"></i>
<i class="fa-solid fa-bag-shopping"></i>
<i class="fa-solid fa-file-code"></i>
<i class="fa-solid fa-grip"></i>
<i class="fa-brands fa-docker"></i>
<i class="fa-brands fa-microsoft"></i>
<i class="fa-solid fa-file-lines"></i>
<i class="fa-brands fa-google"></i>
<i class="fa-brands fa-discord"></i>
<i class="fa-solid fa-bookmark"></i>
<i class="fa-solid fa-code"></i>
<i class="fa-brands fa-html5"></i>
<i class="fa-solid fa-hashtag"></i>
<i class="fa-solid fa-cat"></i>
<i class="fa-solid fa-gear"></i>
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-circle-info"></i>

And so on

---

i downloaded 6.5.2/css/all.css locally, and imported this latest file into my local tiddlywiki, but the above code snippet was not properly parsed by my tiddlywiki, the display icon is garbled, any good ideas
all.json (138.0 KB)（After downloading, rename it to all.css）

Any reply would be greatly appreciated

[tw-FRed]

Hi,

Did you tag your all.min.css tiddler with $:/tags/Stylesheet and edit its type to be Static stylesheet text/css?

[edit]: not sure it will be enough, the end of the min.all.css tiddler text references WOFF2 font files with a relative path, which TW probably won’t find:

@font-face {
  font-family: 'FontAwesome';
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

Fred

[XYZ]

At first, I thought of adding the system tag $:/tags/Stylesheet, but I didn’t think of adding type text/css. Thank you for reminding me, but unfortunately it didn’t work

all.css.json (153.3 KB)

[tw-FRed]

Yes, I edited my post above, I think there are missing font files. Importing only the CSS in tiddlywiki.com will show a missing glyph instead of the expected result:

Fred

[tw-FRed]

However, embedding a font file in an offline TW is possible, here’s a link to one of the many threads where it was discussed on Talk:

Embedding a font into Tiddlywiki

Hi, Here’s what I’ve been using successfully on an offline wiki where I can’t install the font on the system: https://fontmanager.tiddlyhost.com/#How%20to%20add%20a%20new%20font To convert the ttf/woff/woff2 file to base64 I use Webfont Generator or Woff2Base. I then paste the resulting base64 code into a new tiddler tagged $:/tags/Stylesheet and use it in another stylesheet like any other font. Here is an example. Warning: it will redefine every title font in your wiki, try it on tiddlywik…

You can also search for Font Awesome on Talk as the subject has also been addressed before.

Fred

[XYZ]

something seem wrong

Font-Awesome.json (40.4 KB)


It doesn’t work to install the corresponding plugin

[tw-FRed]

After installing the plugin on tiddlywiki.com, this works: <i class="fas fa-home"></i>
Looks like the plugin author redefined some classes names…
This “Cheatsheet” tiddler shows which classes to use for each symbol: Font Awesome — using Font Awesome with TiddlyWiki 5

Fred

[CasperBooWisdom]

I have converted the FontAwesome 6.5.2 to base64, all included in one Stylesheet tiddler

FontAwesome-6.5.2.json (1.3 MB)

Just import it and then the examples like

<i class="fa-solid fa-house"></i>

will work fine

**note - if you have any problems, make sure you remove any of the other FontAwesome files you were messing with, including any FontAwesome plugins so that this is the only FontAwesome file.

[XYZ]

Perfect, my technical god, how to modify the ‘FontAwesome-6.5.2.json’ source file when the font-awesome library is updated again

@XYZ

Font-Awesome.json （40.4 KB）

The data source is the data obtained through the network listening function of the browser console

Font-Awesome-000.json (193.5 KB)

[CasperBooWisdom]

Well, there lies the sticking point. In order to get FontAwesome to work inside of Tiddlywiki, you have to manually convert the woff2 fonts to base64, so there is no really easy upgrade path other than once again manually recreating the css file every time. Would be nice if FontAwesome included a base64 converted version of the entire icon library in their download, which would make this a whole lot easier.