Images are notoriously difficult to align adjacent to textIncorporating icons into your headings is a good way of reproducing branding in your content without relying on text/image replacement. I’ve even done it on this site: take a look at the headings in the sliding panes on the Services page.
Before modern CSS, the only way to do this would be to stuff an image tag into the heading tag before the text. This is less than ideal because (a) It creates added markup and (b) images are notoriously difficult to align adjacent to text.
We are going to use some simple CSS and a background image. Before making the icon, first style your heading like this (changing values as desired):
h2 {
font-size: 1.5em; /* make the heading fairly large */
text-indent: 30px; /* for an icon 27px wide, in this case, leaving 3px space */
font-weight: normal; /* remove default bold style */
}Preview this and make a screenshot of the heading to paste into Photoshop. This way you have a template to make the icon just the right height for the font size. Crop, save and upload the icon design. Now you can append the background declaration:h2 {
Font-size: 1.5em; /* make the heading fairly large */
text-indent: 30px; /* for an icon 27px wide, in this case, leaving 3px space */
font-weight: normal; /* remove default bold style */
background: url(icon.gif) no-repeat center left;
}
Note that I have defined the vertical position of the icon as ‘center’. This way, if the user enlarges their browser text, the icon should still appear correctly positioned (albeit relatively smaller).
Now all your h2 tags will appear to ‘use’ an icon - and you didn’t have to change the markup at all!
Firefox adds a dotted 'marquee' to linksDon’t you just hate it when browsers make decisions for you? Unless you’re some sort of CSS-specific submissive, of course you do. Classics include proprietary margins and padding on elements such as headings and unordered lists. Particularly infuriating is IE6’s insistence on doubling left margin values.
One you may have missed (or thought you had no control over) regards the CSS ‘outline’ declaration. Browsers such as Firefox (!) add a dotted ‘marquee’ to links in their active (clicked) state, often ruining your meticulously designed navigation styles.
Thankfully, the solution is simple. In the uppermost portion of your CSS file simply add an a { outline: none } and the menace is vanquished.