HTML and CSS Reference
In-Depth Information
FIGURE 6.16
Icons made with web fonts.
All that remains to do now is apply the font to your generated content and
position it appropriately:
ul a:before {
font-family: Heydings;
position: relative;
right: 4%;
top: 6px;
}
Because you are using fonts, the icons are very easy to size, color, and even add
drop shadow effects to. This is awesome!
ul a:before {
font-family: Heydings;
position: relative;
right: 4%;
top: 4px;
font-size: 1.6em;
color: #333;
text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
}
Figure 6.16
shows the effect achieved.
TIP:
To m i t i g a t e t h e i s s u e To f l a r g e f To n t f i l e s i z e s a d d -
ing significantly to page load, you could reduce the font
file using FontForge to include only the characters you need.
