[css] Icon Fonts: How do they work?

1 Answers

If your question is how a CSS class can insert a specific character (that will be rendered as an icon in the special font), take a look at the source for FontAwesome:

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

So a CSS content directive is used to insert the character (which is from a special private-use reserved area of Unicode that does not mess up other readers).


I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work?

I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens.

I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available. There are also loads of resources showing how icon fonts can be integrated, but no one seems to be sharing or writing about how this is done!

Check this, its totally using CSS

<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
    .battery.icon {
      color: #000;
      position: absolute;
      margin-left: 2px;
      margin-top: 6px;
      width: 13px;
      height: 7px;
      border-radius: 2px;
      border: solid 1px currentColor;

    .battery.icon:before {
      content: '';
      position: absolute;
      right: -3px;
      top: 1px;
      width: 2px;
      height: 3px;
      border-radius: 0 2px 2px 0;
      border-top: solid 1px currentColor;
      border-right: solid 1px currentColor;
      border-bottom: solid 1px currentColor;

    .battery.icon:after {
      content: '';
      position: absolute;
      left: 1px;
      top: 1px;
      width: 8px;
      height: 5px;
      background-color: currentColor;



<div class="battery icon"></div>