Are icons available for SugarCube's UI menu bottons?

Authoring Twine
1

TweeGo Version: v2.1.1+81d1d71
Story Format: SugarCube v2.31.1

The default menu buttons available in SugarCube have specialized icons. Are those icons documented anywhere? Are other icons included which could be used for user-created menu buttons?

The default icons I’m referring to are the “floppy”, “gear” and “on/off” icons which are in front of the “Saves”, “Settings” and “Reset” menu buttons. (See the attached image.)

I could swear that I saw a mention somewhere of a family of such icons being available but I can’t find it any more. I’m actually not sure if I’m using incorrect terms in my search or if I’m conflating them with icons available for some other IF story format.

Currently I’m using characters from the font I’m using for the story’s text, but they aren’t all that appealing.
menu_buttons|288x229

Edited to add:

Using Firefox’s “Inspect Element”, I discovered that those menu items seem to be using the font “tme-fa-icons”. Unfortunately, the html code which generates them is, shall we say, less than transparent. A web search discovered a table showing the font elements at http://www.motoslave.net/sugarcube/tmp/tme-fa-icons/ (It being in a tmp directory is less than encouraging, though.) I also found @HiEv replying to a question similar to mine at http://twinery.org/questions/754/is-it-possible-to-put-icons-on-the-buttons-in-the-ui-bar However, the example there makes use of a font class (“fa fa-pencil fa-fw” ) which, so far, I haven’t found mentioned anywhere else, and which doesn’t seem to work in the current version of SugarCube.

Is there any documentation describing the font classes which are available in SugarCube?
Or am I going to have to define one myself?

2

SugarCube uses a subset of the free Font Awesome icons.

Along with my “Universal Inventory System” (UInv), which was made for use in Twine/SugarCube, I include the FA_Icons.html and FA_Icons_base64.html Twine files, which should help you find and use Font Awesome icons in Twine.

Have fun! :slight_smile:

3

You could add an Issue to the SugarCube repository asking the developer to include a page that describes that custom Icon Font (and it’s access codes) in the story format’s documentation.

4

Thanks for the pointer!

I’m currently using a derivative of your older response. Specifically:

:: Story Stylesheet [stylesheet]

/* I use class .fa for prepending icons to labels of UI bar menu buttons. */

.fa 
{ font-family: 'tme-fa-icons';
  font-style: normal;
}
:: StoryMenu
<<link '<span class="fa">&#xe807;&nbsp;</span>Navigation Help' "Navigation Help">><</link>>
<<link '<span class="fa">&#xe838;&nbsp;</span>Report a Problem' "Bug Report Instructions">><</link>>

I use span instead of i because i caused the icons to be italicised. sigh

5

The CSS font-style property in the .fa class rule should be removing that styling.

i.fa {
	font-style: normal;
}
6

@Greyelf

Thanks for pointing this out.

I think they were getting italicized because I had defined it as just “.fa” and not “i.fa”. After adding the “i” prefix, it works as you describe.

However, I had to create this class definition myself: it is not provided by SugarCube as I had hoped. I think it would be appropriate for this StoryMenu font configuration requirement to be explicitly mentioned in the documentation. Maybe it’s there by implication, but it certainly wasn’t obvious to me.

I’ll post a report to git.