How to use Font Awesome (add global js to tw)?

#1

I post 3 same posts about this topic on google group but all of them been deleted, I don’t know why if I break the law of the discuss please let me know first I will correct the error.

My question is :

I want to use the fa from https://fontawesome.com/

which need include a javascript first the html like :

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/xxxx.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>

so how to add the to global ?

#2

Are you familiar with this plugin?
https://thediveo.github.io/TW5FontAwesome/

If that doesn’t meet your needs, let us know.

#4

Yes I know it and I used it for several month

but https://fontawesome.com/ contains more fas which I need

#5

you can put it in a tid and tag it $:/tags/RawMarkup,

see https://tiddlywiki.com/#SystemTag%3A%20%24%3A%2Ftags%2FRawMarkup

#6

First look for the existing fontawsome for tiddlywiki solution.

However, If you find a CSS file for something like font Awesome (4/5), bootstrap or even w3css;
https://www.w3schools.com/w3css/w3css_downloads.asp

You can either use the raw tag to include it

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

or obtain the actual file eg w3.css and past it into a tiddler tagged $:/tags/Stylesheet

Actually quite a few CSS fonts and symbol sets even whole CSS frameworks have a CSS only version that can be placed in a tiddler tagged $:/tags/Stylesheet.

  • Normally they have their own naming standard for their CSS eg “fa_” or " w3-" so they do not clash with standard or tiddlywiki CSS

Note: No JavaScript needed

eg; see install this tiddler w3.css.json (23.2 KB)
Then demonstrate with;
<span class="w3-pink">Hello World</span>

#7

Here is the content of my tiddler , after I created it my TiddlyWiki cant loaded, I search for the usage of this tag can’t find the example

created: 20211002050949301
modified: 20211002051401496
tags: $:/tags/RawMarkup
title: FontAwesomeIncluded
tmap.id: 72cf0a5a-ee44-4e67-96f3-dec4191b6701
type: text/vnd.tiddlywiki

<script src="https://kit.fontawesome.com/xxxxx.js" >

Replaced the xxx with my own id.

#8

@Ori To access your wiki;

If you edit the broken tiddlywiki file directly (backup first) then search for the $:/tags/RawMarkup tag and carefully replace it with something like stop save ands reload in the browser it should fix it.

I would use notpad++ or something similar.

I am not sure about including that JS file, but I will let you figure that out. My suggestion was a css only file as stylesheet. Also the existing fontawesome plugin.

Search for “raw” on tiddlywiki.com to find the documentation

That script file https://kit.fontawesome.com/xxxxx.js must exit on the internet, put it in the browser to see if it exists, and then once loaded in tiddlywiki you then need to use the css to see anything.

1 Like