CSS – image links
It depends on what’s going to be in the links themselves. If the client wants full on images (including the text in the images), I’d usually just use an <img> with an <a> wrapped around it, as it’s simple and works in all browsers.
Alternatively, with the same tools, if I want to get tricky and keep as much as possible in the CSS (and I usually do), I prefer to set in an <> with the following css
Display:block; Width:xxpx; Height:xxpx; Background-image:url(/blahblah/blah.png); Background-repeat:no-repeat; (if applicable)
Doing the above allows for easy image swapping, hovers, etc and should work in all browsers as well.
If we have more free reign, and the fonts are web standard, then I would do something similar to the above, but the background image would only be the icon. Going straight off my crazy-morning brain without looking at an editor… something like you have below might look like this:
.KEDUfacebook {
Padding:5px 5px 5px 35px;
Border:1px solid #color;
Line-height:15px;
Font-size:15px;
Font-family:whatever web standard font they’re using;
Background-image:url(/images/facebook-icon.png);
Background-repeat:no-repeat;
Background-position:5px 5px;
Display:block;
Height:xxpx;
}
This would be the HTML:
KaiserEDU on Facebook