Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

[Sugarcube2 and Twine2] How to use "fontawesome.io" on your twine game without downloading it.

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

  • Signing up for their "special" CDN seems of dubious value as it doesn't really provide much you cannot already get without having to give them your e-mail address. Frankly, it mostly seems like a way to track you for dubious reciprocal benefit—beyond giving them your e-mail, their script seems to include tracking code.

    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)
    @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    


    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)
    importStyles('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    
  • Hey there, thank you for your comment. I didn't know that you could add the scripts using those functions and CDNs.

    It seems way safer, I posted this "tutorial" on reddit too and it's already edited to include your comment.

    Thanks again.
Sign In or Register to comment.