Twine Version: 2.8.1
SugarCube version: 2.36.1
Hi, I want to point the player to the “Toggle the UI bar” button on the left side of the screen when the UI bar is stowed and the player needs to unstow it. How can I get that graphic in my main passage text?
This is what I have:
But I want it to look like the actual button:
How can I achieve this effect?
The icon font file used for the UI bar icons comes with Sugarcube, so you can right-click and inspect the button in your browser to see what the name of the icon on it is, then in your passage text put something like this:
<span id="buttonIcon"><i class="fa icon-right-open"></i></span>
Then you can style the span #buttonIcon in the CSS stylesheet to have a border and padding to make it look like the actual button on the UI bar.
I think the icon names I used in the example code above are correct, but it’s been a while since I did anything with the built in Sugarcube icons, so I could be mistaken.
You’d need to install the FontAwesome font in your project for it to work.
SugarCube uses a forked version of FontAwesome, called tme-fa-icons
You can find the whole list here: https://www.motoslave.net/sugarcube/tmp/tme-fa-icons/
Though I am not sure you can use them in-line.
EDIT: you could always just use the character > but in a different font (bolding, maybe some CSS transform?)
I think I am close enough now:
<<if $present>>
//To present something to someone,
<<if setup.UiBarIsStowed()>>
expand the sidebar by clicking the <button id="ui-bar-toggle-stowed"></button> button, and
<</if>>
make your selection from your inventory at the top of the sidebar.//
<</if>>
And in the CSS
#ui-bar-toggle-stowed {
background-color: #444;
border-color: #eee;
}
#ui-bar-toggle-stowed:before {
font-family: "tme-fa-icons";
font-style: normal;
content: "\e81e";
}
Would be nice if it could work the same as the actual button (unstow the UI bar with some <<run>> magic but it will have to suffice for now…)