8.17.2011

Dogmeat Subscription 16 Aug 2011 PLUS Facebook

@Font-Face Icon et Le Template French Fou!

 

Posted: 16 Aug 2011 11:40 AM PDT

 

Layout Zoom: Increase | Decrease

Dogmeat's gone @font-face icon French Template Crazy! @Font-Face Icon et Le  Template French Fou!

Lorem ipsum dolor sit amet

 

Quick Tip: Ever Thought About Using @Font-face for Icons?

\Rating:

Quick Tip: Ever Thought About Using @Font-face for Icons?

Wayne Helman on Apr 23rd 2010 with 116 comments
Tutorial Details
  • Technology: CSS
  • Estimated Completion Time: 15 Minutes
  • Difficulty: Beginner

This entry is part 11 of 16 in the CSS3 Mastery Session - Show All
« PreviousNext »

The evolution of Internet technologies never ceases to amaze. Seemingly daily, new concepts and techniques are being thought up by creative and talented people. With modern browsers being adopted at a greater rate, systems like CSS3 are becoming more and more viable for use on projects of all sizes. Clearly, this can be seen by looking at new services sprouting on-line like TypeKit. Conceptually, if we deconstruct a font down to it’s basic elements, we can make use of this technology for things other than type, icons.

 


The Need for Speed

For a short period of time, developers began producing websites with little regard for bandwidth consumption. HTML and CSS where restrictive and Adobe Flash was an open canvas for designers and developers to stuff animations and complex layouts into. This resulted in some extremely bandwidth heavy sites—we all remember a few. Those were the days before the proliferation of mobile smart phones.

With smart phones accessing the Internet more frequently, bandwidth and page load speeds have suddenly returned to the forefront. Thankfully, advances in HTML, CSS, and JavaScript have made that all possible. Central to webpage speed and responsiveness is the number of HTTP requests a page load must make. Modern browsers limit the number of requests to a single server. The W3C HTTP 1.1 specification reads

“A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.”

One technique that has become increasingly popular is the use of CSS sprites. CSS sprites are designed to reduce the number of HTTP requests to the web server by combining many smaller images into a single larger image and defining a block level CSS element to only show a defined portion of the larger image. The technique is simple, but ingenious.


Deconstructing the Font

Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive”.

CSS3 has introduced to the web development world the ability to embed fonts with the @face-face declaration. Without question, this advancement in Internet technologies is one of the most exciting and important stages in our brief history. With developers able to embed fonts of their choice, designers can produce layouts that will render far more consistently from platform to platform bringing the art of interactive layout closer to it’s print cousin.

If we take a closer look at the technology behind a font, we can gain a far better understanding of how they can be used and deployed. Fonts at their most basic molecular level are a series of vector glyphs packaged up into a single “glyph archive”. We can then reference each glyph by its corresponding character code. Theoretically, it’s very similar to the way in which we reference an array in almost any programming language—through a key/value pair.

With this in mind, the glyphs we reference can really be any vector-based single color image. This is nothing new—we’ve all seen Dingbats and Webdings. They are two examples of non-type fonts, that is, a series of vector based images compiled into a single font archive.


Abstracting and Expanding @font-face

With the advent of font embedding and the realization that fonts are essentially a series of simple vector glyphs, I began to experiment on how to use this format to my advantage. Conceptually, if I placed all required icons for a particular site into a custom font, I would then be able to use those icons anywhere on the site with the ability to change size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text. The added advantage being a single CSS sprite-like HTTP request.

To illustrate, I’ve compiled a new font with a few of the great icons from Brightmix.

Sample glyph chart

I’ve used the lower case slots for plain icons, and the uppercase slots for the same icon in a circular treatment.

To use my new Icon Pack, I’ll first have to export my font set as a number of different font files (.eot, .woff, .ttf, .svg) to be compatible with all browsers. The topic of font embedding and file format converting is covered elsewhere, so I will avoid a detailed explanation here. However, the CSS would look something like this.

  1. @font-face {  
  2.   font-family'IconPack';  
  3.   srcurl('iconpack.eot');  
  4.   srclocal('IconPack'),  
  5.     url('iconpack.woff'format('woff'),  
  6.     url('iconpack.ttf'format('truetype'),  
  7.     url('iconpack.svg#IconPack'format('svg');  
  8. }  
@font-face { font-family: 'IconPack'; src: url('iconpack.eot'); src: local('IconPack'), url('iconpack.woff') format('woff'), url('iconpack.ttf') format('truetype'), url('iconpack.svg#IconPack') format('svg'); }

Once embedded, I now have a complete icon set in vector format to reference. To reference an icon I simply need a style that includes the font-family of “IconPack”.

image alt tag

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • item 1: Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item 2: Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item 3: Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • item 4: Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

zuywxvz

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Permalink | Leave a comment  »

This posting includes an audio/video/photo media file: Download Now

Dogmeat Page

Posted: 16 Aug 2011 06:38 AM PDT

 

facebook

Hi Gaejang,
Here is this week's summary for your Facebook Pages:

 

** PLEASE DESCRIBE THIS IMAGE **
I quit eating Sparta
1,551 monthly active users** PLEASE DESCRIBE THIS IMAGE **103 since last week
1,122 people like this** PLEASE DESCRIBE THIS IMAGE **2 since last week
18 wall posts or comments this week** PLEASE DESCRIBE THIS IMAGE **8 since last week
320 visits this week** PLEASE DESCRIBE THIS IMAGE **1,868 since last week
** PLEASE DESCRIBE THIS IMAGE **
Dampira Quin (Band)
45 monthly active users** PLEASE DESCRIBE THIS IMAGE **2 since last week
112 people like this** PLEASE DESCRIBE THIS IMAGE **0 since last week
0 wall posts or comments this week** PLEASE DESCRIBE THIS IMAGE **0 since last week
29 visits this week** PLEASE DESCRIBE THIS IMAGE **13 since last week
** PLEASE DESCRIBE THIS IMAGE **
주아란 (Parry Hotter)
72 monthly active users** PLEASE DESCRIBE THIS IMAGE **1 since last week
75 people like this** PLEASE DESCRIBE THIS IMAGE **0 since last week
0 wall posts or comments this week** PLEASE DESCRIBE THIS IMAGE **3 since last week
21 visits this week** PLEASE DESCRIBE THIS IMAGE **4 since last week
** PLEASE DESCRIBE THIS IMAGE **
Dogmeat Page
4,353 monthly active users** PLEASE DESCRIBE THIS IMAGE **138 since last week
67 people like this** PLEASE DESCRIBE THIS IMAGE **0 since last week
3 wall posts or comments this week** PLEASE DESCRIBE THIS IMAGE **3 since last week
58 visits this week** PLEASE DESCRIBE THIS IMAGE **9 since last week

Learn more about how to update via mobile

 

Statistics and management for additional Pages

 

Thanks,
The Facebook Team

 

Permalink | Leave a comment  »

This posting includes an audio/video/photo media file: Download Now

@Font-Face Icon et Le Template French Fou!   Posted: 16 Aug 2011 11:40 AM PDT   Layout Zoom: Increase | Decrease Dogmeat's gone @font-face icon French Template Crazy! @Font-Face Icon et Le  Template French Fou! technology philosophy tags territory tools schedule Lorem ipsum dolor sit amet   Tutorial ...» more Dogmeat