Fri, 2006-06-16 14:53
Help... please. Is there a way, through CSS where I can apply a style, and then have a small image (or icon) added just before the text receiving the style? An example might be the external link icon sometime found next to hyperlinks. Though usually this icon follows the hyperlink, I'd like an icon that precedes any selected text (this will not always be a hyperlink).
Any suggestions would be hugely appreciated!! Thank you
Fri, 2006-06-16 15:00
#1
[Solved] Image/icon preceding text
You can apply an image as a background to an element, make sure it's set not to repeat and positioned to the left (which it usually is by default), pad the text out a little and then apply the class to any text you want to have an image on. Here's a quicky example;
.iconed{
background-image:url(icon.gif);
background-repeat:no-repeat;
padding-left: 15px; /* Padded a bit left, so the text isn't on top of the image */
}
<p class="iconed">Text with an icon just before it</p>
Of course, it doesn't have to be a paragraph. It could be a link, or a header, or a list item.
(Sorry for the many edits - it's stripping out a line for some reason)
Fri, 2006-06-16 17:17
#2
[Solved] Image/icon preceding text
Frikin' beautiful!! Works like a champ! Thank you so much!! 
Fri, 2006-06-16 17:59
#3
[Solved] Image/icon preceding text
If IE had decent CSS support you could also use the :before pseudo class to add the image
Fri, 2006-06-16 19:25
#4
[Solved] Image/icon preceding text
thepineapplehead wrote:
If IE had decent CSS support you could also use the :before pseudo class to add the image
Aye. It's a total shame that doesn't work, because it's so simple and lovely. 