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. ::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.
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:
<button data-icon="delete">Remove this item</button>
We can append the string to that (“delete”), like this:
[data-icon]::before {
content: attr(data-icon);
}
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:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
The full CSS for the psuedo element icons is more like:
[data-icon]::before {
content: attr(data-icon);
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 1em;
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
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:
<ul class="list">
<li>One</li>
<li data-icon="check">Two</li>
<li>Three</li>
<li>Four</li>
</ul>
See the Pen Pen #01 by CSS-Tricks (@css-tricks) on CodePen.
You could also use it for displaying user states with integrations or forms.
<ul class="list">
<li data-icon="error">Int One</li>
<li data-icon="check">Int Two</li>
<li data-icon="error">Int Three</li>
<li data-icon="error">Int Four</li>
</ul>
See the Pen Ligature Icons – Error Indicators by CSS-Tricks (@css-tricks) on CodePen.
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.
See the Pen Pen #03 by CSS-Tricks (@css-tricks) on CodePen.
Awesome article. Ligature use (abuse? heh) is pretty nifty. Here’s some more reading for those interested (or just confused, like I was): http://alistapart.com/article/the-era-of-symbol-fonts
Quote from that article:
thanks for sharing.
at first ,i’m confused ,as i read the doc http://google.github.io/material-design-icons/
the paragraph made it clear.
“This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.”
awesome feature!
but the compatibility and the support of browser is pain points
Is this applicable only if i use material icons..?
Ligature = collection of SVGs that can be called by its text name.
svg (inlined) do not cache in browser. you can svg but browser support isn’t there for IE 11 & below.
I wouldn’t waste my time with liguatres, at least not now.
The problem with front-end development is that very few things that come out ever become something productive/useful.
react.js was all the rage in 2015. Only after a year, front-end developers are looking at their react codes that look like dog food & scratching their heads wondering what went wrong.
A ligature is a glyph that is substituted for a group of glyphs. Usually the purpose is to “fix” glyph collisions (though collisions are not a requirement for it to be a ligature.) For example: the “fi” ligature in most serif fonts is used because the top part of the letter “f” awkwardly overlaps the dot of the “i”; most fonts fix it by smoothly connecting those two glyphs. It’s a concept independent of SVG, and has existed for several centuries. A good quality book probably has ligatures if you look closely. Not sure where you got that SVG and React.js thing from.