The following is a guest post by Jason Jacobson, a senior engineer for Minneapolis based startup LeadPages® . Jason shows off something I didn’t know was possible: turning a string into an icon. This requires an icon font, and Igenerally refer SVG for icons, but that doesn’t stop this from being a bonafide CSS trick that is certainly worth knowing about!

Pseudo elements (i.e. ::before and ::after ) have been a big help to me when creating sites, so I came up with an approach for using them alongside ligature icons to create more readable and maintainable code.

Notice that for all the examples so far, I haven’t added any extra CSS or HTML to get the new icons.

Here is an example of a button that has a :hover and :active state. I’ve added another attribute to handle the success icon. This is something that could be done with JavaScript, but since this is CSS-Tricks, I went for the pure CSS approach.