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 I generally 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.
::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.
Ligature icons? Yep! That's how Google's Material Icons work.
Rather than use text in the HTML though, you can use a pseudo element. That is, use the
content property in CSS to inject the string into any element. Say you have this HTML:
We can append the string to that ("delete"), like this:
Then we can, through the power of magical ligatures, turn that text into an icon. That happens automatically when the font-family is set to one that does ligature icons, like Material Icons.
First you need that icon font available:
The full CSS for the psuedo element icons is more like:
font-family: 'Material Icons';
* Support for all WebKit browsers. */
* Support for Safari and Chrome. */
/* Support for Firefox. */
/* Support for IE. */
Note: we need to use the
font-feature-settings property to make this work in Internet Explorer.
How about a list that shows a selected item:
You could also use it for displaying user states with integrations or forms.
- Int One
- Int Two
- Int Three
- Int Four
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