Using @font-face for icons

A new technology used for increasing speed and to improve HTTP response time is embedding icons in a font and use them with the CSS3 @font-face declaration.

After you’ve downloaded an icon-font or you’ve created by yourself a font using the icons you need in your site, you can use this font like a regular one  (you can use the icons with the ability to change size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text).

The CSS will look like:

@font-face{
  font-family: 'WebSymbolsRegular';
  src: url('fonts/websymbols-regular-webfont.eot');
  src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/websymbols-regular-webfont.woff') format('woff'),
  url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
  url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
.icon {
  font-family: 'WebSymbolsRegular';
  color: red;
}

To reference an icon you will need a style that includes the font-family of “WebSymbolsRegular” (in our example, the class icon). After that you can add any style that applies to a text.

The HTML will look like:

<p>This is an attachement <span class="icon">A</span></p>
<p>Tweet about it <span class="icon">t</span></p>
<p>Share it on <span class="icon">f</span></p>
<p>Watch it on <span class="icon">y</span></p>

The result ih the browser:

The link to the downloadable font is:websymbols

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s