Hello there, yesterday I was working on my game when I decided to create a simple character UI. The UI was mainly composed of a health bar and an energy bar. I made it work but for me, it seemed that something was missing so I decided to put an energy icon and a heart icon using "
fontawesome.io". I could either:
1)
Download the files, import them into my project and use it on my project locally (the easiest way and you sure won't have any a headache with it). Unfortunately, I plan on sharing the raw HTML and with that, I'd have to share a folder with the "fontawesome" files too.
2)
Import from an online repository. I was already planning on creating a Github, upload it there and import the raw documents when I saw that you can do it for free on their sites. What you have to go to their site:
http://fontawesome.io/ and click on "Get Started" which will take you to this URL:
http://fontawesome.io/get-started/
There you'll see something like
Font Awesome CDN. Now, you simply have to enter an email and they will send you a link that looks like this: <script src="
https://use.fontawesome.com/UNIQUE_ID_GOES_HERE.js"></script>. With that in hands comes the easiest part: You just have to grab this whole line and copy it to your start point on twine. You don't need to copy this code to every single passage that you intend to use the icons.
Once that is done, you'll be able to grab icons from here:
http://fontawesome.io/icon , for example:
http://fontawesome.io/icon/heart/ and the code will be something like this: <i class="fa fa-heart" aria-hidden="true"></i>. Add wherever you want in your code and that's it the result will be something like this:
http://i.imgur.com/Yp7Bwsk.png
PROS:
* Your version of this framework will always be updated because it's on the server side.
* You won't need local CSS files;
* It's really simple and quick to add icons to your games;
* You can use a total of 675 icons for free.
CONS:
* You are importing it from their site, which means that if they site goes down, so will your icons.
* If their site becomes slow, you might experience a problem with icon loading.
Comments
Font Awesome has been, and continues to be, available on various CDNs already. In particular, BootstrapCDN has been their main CDN for a very long time now.
For a story format agnostic way to import Font Awesome via CSS, you may do something like the following: (goes at the very top of the Story Stylesheet)
Additionally, since version v2.16.0, SugarCube v2 has provided the importStyles() function which may be used to import Font Awesome: (goes in the Story JavaScript)
It seems way safer, I posted this "tutorial" on reddit too and it's already edited to include your comment.
Thanks again.