Adding Icon to button sugarcube 2.31.1

Authoring Twine
1

I was wondering how I make an icon appear for a button like I do on this passage.

Screenshot (148)
Screenshot (148)3840Ă—2160 451 KB

2

My ultimate goal is to add an icon on the left part of the button in anyway. just saying. will definitely provide more details if it helps.

3

Considering that I don’t know how you made the icon in the passage (an image, an SVG, or a font icon), it’s kind of hard to say exactly. But, most likely, you can just put the same code in the button’s linkText parameter. For example:

<<button '<span class="tme-icon tme-refresh" style="display: inline-block;"></span> Check For Updates'>>
    /* Button code goes here. */
<</button>>
Which also needs this CSS. (Click to reveal.) 
.tme-icon {
	display: block;
	width: 13px;
	margin: auto;
	padding-left: 2px;
}
.tme-icon::before {
	font-family: tme-fa-icons;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}
.tme-refresh::before {
	content: "\e826\00a0";
}

That will make a button which looks like this:
image

FYI - You can take a look at the “SugarCube Icons” section of my Twine/SugarCube sample code collection if you want to use any of the other icons which are built into SugarCube.

Hopefully that answers your question. If not, we’ll need to see the code you’re using to make that icon appear.

2 Likes
4

In case of any additional information I made the original using a png to Base64 encoder.

5

If I may ask:
what are the icon:before
and
refresh: before CSS. Like why do they need to be there in order for it to work? what is it setting or containing?
sorry if that sounds dumb, I just really want to understand, and all the API is kind of basic if you don’t understand the syntax well (which I’m actively trying to learn the syntax, I promise.)

6

That’s CSS code, so you can look it up at the MDN (Mozilla Developer Network) Web Docs site or other similar places on the Internet.

Specifically, see the CSS “::before (:before)” documentation, which explains what it is and how it can be used.

For stuff like that, I’d recommend Googling it, like I did, using something like “MDN CSS before”, and the link I gave above was the first thing listed in the search results. Doing that should get you the answer immediately, without having to wait for someone on a forum to point you to the same link. :wink:

Hope that helps! :slight_smile:

7

I definitely try by myself first every time! I only resort to the forum if I’m very stuck on a task haha
But thank you for the API! I appreciate the source!