XF 1.4 Add icon before a link on a Thread

[New Joe]

When I used vB I used this below code which would add a nice icon before a url link in a Thread

.message .messageContent .messageText a {
    /*background: url("/images/url.gif") no-repeat scroll left center transparent !important;*/
    /*padding-left: 15px; */
}

I would add that in the EXTRA template
However for some reason it doesn't work on Xenforo

On my test site I got it working some how but I can't remember how I did it now
Any ideas?

 

[TJA]

Try these

.messageContent .externalLink:before {
content: url ("/images/url.gif") !important;
padding-right: 2px !important;
}

.messageContent .internalLink:before {
content: url ("/images/url.gif") !important;
padding-right: 2px !important;
}

 

[New Joe]

Thanks, but no, it still doesn't show...
I don't get why it doesn't

 

[New Joe]

Still not able to get it to work...
All i want is a small image showing before an external URL link within a post...

 

[Snog]

.externalLink::before {
  content: "";
  display: inline-block;
  background: url("images/url.gif") no-repeat left;
  width: 16px;
  height: 16px;
}

 

[New Joe]

.externalLink::before {
  content: "";
  display: inline-block;
  background: url("images/url.gif") no-repeat left;
  width: 16px;
  height: 16px;
}

Many thanks Snog, that worked excellent.

 

[Nirjonadda]

@Snog Does this work for XF2? Also how to add for Internal and External Link Icon with font awesome?

 

[BassMan]

@Snog Does this work for XF2? Also how to add for Internal and External Link Icon with font awesome?

Add this to your extra.less template:

.link--external:before {
    font-family: FontAwesome;
    content: "\f14c";
    padding-right: 3px;
}
.link--internal:before {
    font-family: FontAwesome;
    content: "\f0c1";
    padding-right: 3px;
}