Add icon to hyperlinks

[3lliot]

Anyone know how to add an icon to a hyperlink style?

I've created a new class for <a> and added a background image, but it's not showing. is this because it's an inline element?

[3lliot]

I've tried display=inline-block, but that doesn't help.

[i-tietz]

Is your hyperlink made of text?
Is it part of a paragraph or is it the whole paragraph? Means:
... bla bla link text here bla bla ...
or
... bla bla.
link text here

[3lliot]

Some of both. I know I could make a list bullet using a link icon, but sometimes the links are inline.

[Craig.Prichard]

Code: Select all

/* a[href^="http"] MUST precede a[target="_blank"] */
a[href^="http"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/blank-16x16.gif');
  background-repeat: no-repeat;
}
/* Because all external links should be opened in a new tab, I apply the
 * black gif to all http links then overwrite the target="_blank" (below)
 * with a right icon
*/
a[target="_blank"]
{
  padding-left: 20px;
  background-image: url('../Images/CSS/external-16x16.gif');
  background-repeat: no-repeat;
}

/* a[href^="mailto"] MUST follow a[target="_blank"] otherwise the a[target="_blank"] icon will override */
a[href^="mailto"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/email-16x16.gif');
  background-repeat: no-repeat;
}

a[href^="http://mycity/workgroups/org/LIM/AssetManagement/GAM/Wiki/TransE"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/Wikipedia-icon-16.png');
  background-repeat: no-repeat;
}

a[href*=".swf"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/media-16x16.gif');
  background-repeat: no-repeat;
}

a[href*=".doc"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/word-16x16.gif');
  background-repeat: no-repeat;
}

a[href*=".xls"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/xls-16x16.gif');
  background-repeat: no-repeat;
}

a[href*=".ppt"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/ppt-16x16.gif');
  background-repeat: no-repeat;
}

a[href*=".pdf"] 
{
  padding-left: 20px;
  background-image: url('../Images/CSS/pdf-16x16.gif');
  background-repeat: no-repeat;
}

[3lliot]

Thanks Craig, I'll give that a shot