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

#1

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

image
image1321×866 59.8 KB

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）

image
image1369×853 101 KB

image
image1334×591 32.6 KB

image
image1328×842 50.6 KB

Any reply would be greatly appreciated

#2

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

1 Like
#3

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

image
image1336×521 22 KB

image
image1339×248 11.5 KB

all.css.json (153.3 KB)

#4

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:

image

Fred

1 Like
#5

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:

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

Fred

1 Like
#6

something seem wrong

image
image911×620 15.3 KB

Font-Awesome.json (40.4 KB)


It doesn’t work to install the corresponding plugin

image
image1351×776 43.7 KB

#7

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

1 Like
#8

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.

2 Likes
#9

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

image
image907×829 29.4 KB


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

image
image1805×914 153 KB

Font-Awesome-000.json (193.5 KB)

#10

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.

2 Likes