Being Awesome

In today's comic, the frogs of today and of ancient times are using pictures instead of words to convey meaning. The problem is that sometimes the meaning is lost. My children know that the picture of a floppy disk means Save, but they have no idea what a floppy disk is.

Despite this problem, I do like to use small pictures on web pages to represent certain actions. If you'd like to do this as well, be sure to check out Font Awesome (if you haven't already). I used to create small images myself to use on web pages in <img /> tags for this purpose, but doing this with fonts and CSS makes even more sense. When the image is a scalable, vector-based character from a font, you can make it any size/color/rotation you need.

Using Font Awesome can seem like magic. You just put an empty tag in your HTML with a couple classes applied to it and it renders as a picture of something. The following example is the bomb!

<i class="fa fa-bomb"></i>

There is no actual magic involved, however. The CSS that accompanies the Font Awesome font makes use of the ::before pseudoelement to add a character of text to your markup. The character added depends on the class and maps to one of the images in the font.

Pseudoelements let you do all kinds of crazy things via CSS. Like ::before, there is also an ::after. They allow you to add text or images (or nothing) to the page, but the additions don't actually become part of the DOM. That last part makes them a little difficult to work with sometimes, but they are still useful. Here's a weird example:

a::after {
    content: " (don't click on this!)";
}

That will add a dire warning to every link on the page. I didn't say it was a useful example. I said weird.

If you'd like some useful examples, check out CSS-Tricks. But don't forget about Font Awesome if you just want to put some icons on your pages now. And also don't forget to read today's comic.

Amphibian.com comic for 16 February 2015