Icons in New Web

Icons in The New Web

Icons With Web Fonts

The New Internet is Fluid sharp and crisp, but the major culprit to slow it down are the icons which are to be optimized for viewing differently on different screen sizes many icons slow down the web site at the peak time and they will also fail on the retina display

The Solution : Using Icon Fonts Instead of Icons

Instead of using the icon files you can use the vector text which can re-size itself to any screen layout.

The advantages are (according to CSS Tricks):

• Easy change in the Size.
• Easy change in the colour.
• Easily add the shadow.
• Transparent knockouts, which work in IE6 unlike alpha transparent pngs.
• Can be rotated like images
• Add strokes to them with text-stroke or add gradients/textures with
  background-clip: text;
•  @font-face rule which has been supported from as early as Internet Explorer 4 (with .eot).
• (The Best) Lesser HTTP Requests

 Ex. using Web Symbols

1. @font-face{   
2.     font-family: 'WebSymbolsRegular';  
3.     src: url('fonts/websymbols-regular-webfont.eot');  
4.     src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),  
5.        url('fonts/websymbols-regular-webfont.woff') format('woff'),  
6.        url('fonts/websymbols-regular-webfont.ttf') format('truetype'),  
7.        url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');  
8. }  

The Icons are generally used with numerical markup and pesudo elements when they are not a part of the main rendering of the page
for ex :before is generally used for showing icons before menus and nth-child(number) is used to decide which items to show before which submenu an ex from HongKiat shows this

HTML

1. <ul class="icon-font pseudo">
2.     <li>Reply</li>
3.     <li>Reply All</li>
4.     <li>Forward</li>
5.     <li>Attachment</li>
6.     <li>Image</li>
7. </ul>

CSS

1. ul.icon-font.pseudo li:before {
2.     font-family: WebSymbolsRegular;
3.     margin-right: 5px;
4. }
5. ul.icon-font.pseudo li:nth-child(1):before {
6.     content: "h";
7. }
8. ul.icon-font.pseudo li:nth-child(2):before {
9.     content: "i";
10. }
11. ul.icon-font.pseudo li:nth-child(3):before {
12.     content: "j";
13. }
14. ul.icon-font.pseudo li:nth-child(4):before {
15.     content: "A";
16. }
17. ul.icon-font.pseudo li:nth-child(5):before {
18.     content: "I";
19. }

This way every element decides icons displayed before it and also there is no problem of them being displayed incorrectly.

But there may be times when the icon to display is mapped to a Unicode character instead of a alphanumeric  key in that case you will have to use numerical reference markup which can be found at http://en.wikipedia.org/wiki/Numeric_character_reference. and http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Some of you might not like the idea of adding the whole font when all you need is just 3 or 4 icons. For those of you there is a nifty tool at http://www.fontsquirrel.com/fontface/generator/
check it out but use it at expert mode with custom subsettingfor best results.

and comment on how you loved or hated this approach