search

tmedwards / sugarcube-2

SugarCube is a free (gratis and libre) story format for Twine/Twee.
https://www.motoslave.net/sugarcube/2/
BSD 2-Clause "Simplified" License
177 stars 41 forks source link

Please document how to use the font tme-fa-icons in StoryMenu declarations #32

Closed selden closed 11 months ago

selden commented 4 years ago

Please explicitly document how to use the font tme-fa-icons in StoryMenu declarations.

I spent most of today researching and getting help in how to add "fancy" icons to my own StoryMenu entries, like those used by SugarCube's default UI menu entries. I think it would be very helpful for other novices like myself, saving them a lot of time, if there were an explicit description of the procedure in the SugarCube documentation. It might be there by implication, but, if so, it was not at all obvious to me.

For example, it might be appropriate to

  1. Mention the name of the font that's used in SugarCube's default menu entries (tme-fa-icons)
  2. Mention how to find out what characters it provides and their codes.
  3. If it exists, mention the name of SugarCube's "i." (italics) class which is used to specify the font
  4. Otherwise, give an example of creating such a specification
  5. Perhaps mention the history why 'i." is used instead of some other HTML markup prefix.
  6. Show an example of code that one can use to prefix an icon to the menu entry.

FWIW, I finally managed to implement the icons in the story that I'm currently working on by using the following procedure:

I created this Story Stylesheet entry

i.fa 
{ font-family: 'tme-fa-icons';
  font-style: normal;
}

and invoked it using these StoryMenu entries

<<link '<i class="fa">&#xe807;&nbsp;</i>Navigation Help' "Navigation Help">><</link>>
<<link '<i class="fa">&#xe838;&nbsp;</i>Report a Problem'>> <<bugreport "Bug Report Instructions">><</link>>
TwelveNights commented 4 years ago

While this isn't necessarily an explicit document, there is a reference to tme-fa-icons that you may find helpful.

The convention of using i is actually derived from FontAwesome. In this case, you actually only need the class name; the ::before pseudo-element which contains the code is defined in the css.

selden commented 4 years ago

@TwelveNights Was that directed to me or @tmedwards ?

I think I managed to work out the essentials, it's just that it took a lot of time. My comments above weren't a request for information, but mostly were an attempt to suggest some of the items which might be included if that information gets added to the documentation.

Thanks for the pointers, though. I'll be looking through them.

tmedwards commented 11 months ago

Resolved by e776abaa07e2350241d0420df351033ecdbb4406.