Using CSS for Icons
A quick way to use 'icons' in your Twine story is through CSS. There are several open -- but not always free -- icon sets out there. For this example, however, I will use <a href="https://material.io/icons/">one</a> hosted with Google.
Through using a icon (font) set, we can have icons appear in the place of words and through using only CSS.
For example, here are five icons:
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
[[Bigger]]Because these icons are actually part of a font set, they react to changing the font size (font-size) in CSS. In this new example, I've added a //"font-size: 48px"// style rule to them to make them bigger.
<i class="material-icons bigger">cloud</i>
<i class="material-icons bigger">favorite</i>
<i class="material-icons bigger">attachment</i>
<i class="material-icons bigger">computer</i>
<i class="material-icons bigger">traffic</i>
[[Aligning]]Finally, and borrowing from <a href="https://www.youtube.com/watch?v=MvMmcccZytY">a previous video</a> on creating modals, we can use the icons to create a click-for-new-window effect of clicking on the icon and seeing a modal window pop-up with information.
{[
<div class="modal">
<div class="modal-content">
<span class="close">
{(link-repeat: "×")[(replace: ?modal)[] ]}
</span>
Some content in the cloud!
</div>
</div>
](modal|}
(link-repeat:"<div class='icon'><i class='material-icons bigger'>cloud</i><br>Cloud</div>")[(show:?modal)]|=
<i class="material-icons bigger">cloud</i>
=|=
<i class="material-icons bigger">favorite</i>
=|
<i class="material-icons bigger">attachment</i>
|==|
In addition to using the icons, we can also align them using the "|" and "=" signs in the markdown as part of Harlowe. Each "|" is a column length and each "=" is a letter (em) margin space. (As always, check out the <a href="https://twine2.neocities.org/2.html#markup_column">documentation<a>!)
[[Act like desktop icons]]