[Twine 2][SugarCube 2.29] Are there any built-in icon libraries?

Authoring Twine
1

Hi there. I am a blind developer and table-top RPG player. I’ve been working on making myself some we-based utilities to run a game, and one of the major obstacles I can see is map-making. I could set myself up a grid-based map creator, but I would really like to have some basic icon images to alert my players to where certain things are in a room.

Thus, I was wondering if SugarCube had any built-in CSS icon libraries. I’m not very hopeful, as I can’t find a reference to them anywhere, but I figured I’d ask. If modifying the head section wasn’t such a hassle I’d just do that, but alas…

Any suggestions would be appreciated. Thank you!

3 Likes
2

SugarCube does include a limited number of Font based Icons via it’s inclusion of it’s custom “tme-fa-icons” font file.

However if you want access to a large number of Font based Icons then I suggest looking into including one of the font files available from the Font Awesome web-site.

1 Like
3

I was looking at that library, but to impliment it in a project, you need to add a reference to it in the head section of the HTML document. My past experience with Twine is that this can’t be done without a) using some 3rd-party software that I don’t understand or b) adding that reference each and every time I want to test the story.

Am I wrong about this, or can a ‘link’ tag be added via JavaScript or JQuery from inside Twine’s Story JavaScript?

4

Putting the following in the Story Stylesheet works for me:

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

Then you can @@.fa;.fa-heart;@@ or similar to get the icons.

–Josh

1 Like
5

This article explains how to convert an external font file into a Base64 data chunk which can be used within a CSS font-face @ rule.

Such rules can be placed at the start of your project’s Story Stylesheet area.

1 Like
6

Thanks, you guys. I’ll take a look at this and see if I can wrap my head around it. I appreciate the suggestions!

1 Like