4 replies [Last post]
gregw74
Offline
Regular
Last seen: 11 years 38 weeks ago
Joined: 2006-06-16
Posts: 11
Points: 0

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

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 13 years 39 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

[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)

-- Frances

gregw74
Offline
Regular
Last seen: 11 years 38 weeks ago
Joined: 2006-06-16
Posts: 11
Points: 0

[Solved] Image/icon preceding text

Frikin' beautiful!! Works like a champ! Thank you so much!! Laughing out loud

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 36 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

[Solved] Image/icon preceding text

If IE had decent CSS support you could also use the :before pseudo class to add the image Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

fberriman
fberriman's picture
Offline
Enthusiast
Reading, England, UK
Last seen: 13 years 39 weeks ago
Reading, England, UK
Joined: 2006-06-02
Posts: 146
Points: 0

[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 Laughing out loud

Aye. It's a total shame that doesn't work, because it's so simple and lovely. Sad

-- Frances