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: cloud favorite attachment computer traffic [[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. cloud favorite attachment computer traffic [[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"> {(link-repeat: "&times")[(replace: ?modal)[] ]} Some content in the cloud! </div> </div> ](modal|} (link-repeat:"<div class='icon'>cloud Cloud</div>")[(show:?modal)]

|= cloud =|= favorite =| attachment |==| 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]]