Design

Higher and Sharper UI Icons with Net Fonts

Advertisement: Click here to learn how to Generate Art From Text

Are you utilizing bitmap photographs like PNGs and GIFs for icons in your web site? In that case, you might need observed they are often fairly hefty in dimension, particularly in the event that they’re detailed or quite a few. This not solely will increase the file dimension however also can decelerate your web site, because it requires a number of HTTP requests for every icon.

Whereas CSS sprites supply a workaround, they don’t fully remedy the problem of enormous file sizes. One other draw back of bitmap icons is their lack of flexibility and scalability. Enlarging these icons or viewing them on high-resolution screens, like Apple’s retina show, typically ends in a blurry look.

If these points sound acquainted, it’s time to contemplate switching to icon fonts for a extra environment friendly and scalable answer.

Exploring the Benefits of Icon Fonts

An icon font is actually a group of icons packaged into an internet font, which might be simply included into an internet site utilizing the @font-face rule. As highlighted by Chris at CSS-Tips, icon fonts convey a number of key benefits over conventional picture icons:

  • Being vector-based, icon fonts are resolution-independent, making certain sharp and clear show on numerous display screen resolutions, together with high-resolution screens like retina shows.
  • Icon fonts are scalable, permitting for dimension changes with none loss in high quality or readability.
  • As they’re fonts, you may simply modify their shade, transparency, text-shadow, and dimension utilizing CSS.
  • They are often animated with CSS3, including a dynamic aspect to your web site.
  • Using @font-face for icon fonts is extensively supported, even in older browsers like Web Explorer 4 (with .eot).
  • Utilizing icon fonts ends in fewer HTTP requests and a smaller total file dimension.

Right here’s a listing of some prime free icon fonts out there:

All the time guarantee to overview and cling to the licensing phrases earlier than embedding any icon font in your web site, as an indication of respect for the creator’s effort and work.

Implementing the @font-face Rule

As talked about earlier, icon fonts are embedded in internet pages utilizing the @font-face rule inside CSS. This rule permits us to outline a brand new font-family. Let’s take the ‘Net Symbols’ font for example:


 @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');
 }

Within the HTML doc, to show the icons, we merely use characters that correspond to every icon. Slightly than making use of the font-family globally, we are able to goal particular components by including a singular class, like this:


 <ul class="icon-font">
	 <li>h</li>
	 <li>i</li>
	 <li>j</li>
	 <li>A</li>
	 <li>I</li>
 </ul>

Then, again within the CSS, we outline this new font-family for the category we added:


.icon-font {
    font-family: WebSymbolsRegular;
    font-size: 12pt;
}

Demo @font-face

Integrating Icons with Pseudo-elements

Pseudo-elements supply one other inventive method to incorporate icons. Think about the next HTML markup as our place to begin:


	 <ul class="icon-font pseudo">
	 <li>Reply</li>
	 <li>Reply All</li>
	 <li>Ahead</li>
	 <li>Attachment</li>
	 <li>Picture</li>
 </ul>

Within the CSS, we are able to improve this listing through the use of pseudo-elements to show icons earlier than every merchandise:


ul.icon-font.pseudo li:earlier than {
    font-family: WebSymbolsRegular;
    margin-right: 5px;
}

ul.icon-font.pseudo li:nth-child(1):earlier than {
    content material: "h";
}

ul.icon-font.pseudo li:nth-child(2):earlier than {
    content material: "i";
}

ul.icon-font.pseudo li:nth-child(3):earlier than {
    content material: "j";
}

ul.icon-font.pseudo li:nth-child(4):earlier than {
    content material: "A";
}

ul.icon-font.pseudo li:nth-child(5):earlier than {
    content material: "I";
}

Demo Pseudo-element

Personal Use Unicode

There’s a situation the place as a substitute of embedding icons into normal characters (A, B, C, D, and many others.), they’re embedded in Unicode Personal Use Areas to keep away from any clashing amongst characters. This methodology is utilized by instruments like FontAwesome, the place the character codes are included within the stylesheet like so:


.icon-glass:earlier than {
    content material: "f0c6";
}
 

To immediately insert the icon into HTML, the code f0c6 received’t render because it’s not a sound HTML-encoded character.

HTML requires a numerical reference markup to render particular characters. It requires prefixing the hexadecimal quantity (representing the character) with an ampersand (&), a hash (#), and an x. As an example, f0c6 turns into in HTML. In FontAwesome, this code shows a paper clip icon, like this:

paper clip

Demo Unicode

Font Subsetting

When your icon assortment consists of unused characters, you may remove them by subsetting the font, which additionally reduces the font file dimension. A handy software for that is FontSquirrel’s @font-face generator.

Go to the generator, add your font, and choose Knowledgeable. Then select Customized Subsetting for extra choices.

font subset

For instance, utilizing the Sociolico font for social media icons on our web site, we solely want the icons for Dribble, Fb, and Twitter, represented by d, f, and t. These characters are entered within the Single Characters area as proven:

font subset

Now, you may obtain the font, which on this case, has been decreased to a mere 3Kb to 5Kb in dimension. Be aware that solely the characters d, f,, and t will render as icons; every other characters will seem as common letters.

Remaining Thought

Whereas this apply excludes the potential for including extremely detailed results like this, it presents a versatile, scalable, retina-ready answer with minimal file dimension. In case your design can bear the absence of excessive element, this icon-serving methodology is very useful.

For these desperate to discover additional, under are some useful references, together with our demo and supply code out there for obtain.

See demo
Obtain supply codes

Be aware: This submit was first printed on the fifth of Dec, 2012.

Hi, I’m yellowmangodesign

Leave a Reply

Your email address will not be published. Required fields are marked *