Add icon to external links.

[pequeno]

Hello I want to add a icon ( http://fontawesome.io/icon/external-link/ ) to external links.

Is it possible with custom.css? How to do it?

[pequeno]

Nothing about this?

[TSP]

See: http://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia

In IPS, only for post content, it would translate to something like: 

.ipsComment_content .ipsType_richText a[href^="http://"]:after, 
.ipsComment_content .ipsType_richText a[href^="https://"]:after {
    content: "\f08e";
	margin: 0 0 0 5px;
	font-family: "fontawesome";
}

/* Dont apply above styling to your own site */
.ipsComment_content .ipsType_richText a[href*="//www.yourcommunityurl.com/"]:after {
  	content: '';
  	margin: 0;
}

This should apply the external link icon from font awesome after external links: http://fontawesome.io/icon/external-link/
If you want another icon, then you need to search for the icon on the font-awesome site and replace f08e with whatever it says after "Unicode:" on the site for the page of the icon you wish to use. 

I've not tested this. You would need to remember to edit the URL in the second CSS-rule to have it not apply to internal links.

[pequeno]

Thanks TSP, adding but this code to custom.css don´t add the icon.

[TSP]

Did you also add font-family: "fontawesome"; to the first rule? I edited my post to include that after I first replied. 

If you did, then I'm not sure what could be wrong. 

[pequeno]

Yes i used this

.ipsComment_content .ipsType_richText a[href^="http://"]:after, 
.ipsComment_content .ipsType_richText a[href^="https://"]:after {
    content: "\f08e";
	margin: 0 0 0 5px;
	font-family: "fontawesome";
}

/* Dont apply above styling to your own site */
.ipsComment_content .ipsType_richText a[href*="//www.yourcommunityurl.com/"]:after {
  	content: '';
  	margin: 0;
}

 

[TSP]

Then I'm not sure, I would have to take a look at your site. I tested quickly by applying the same style rule to the developer console when browsing this site and that worked. 

[pequeno]

i send you a PM

[pequeno]

Hello TSP Works!. Seems that effectively I dont use the "font-family" first time. Sorry

[TSP]

It should apply to all existing urls, but some of your links on that test forum seem to have been broken somehow. For example the href of one google-link over there is simply "null". 

[pequeno]

3 minutes ago, TSP said:

It should apply to all existing urls, but some of your links on that test forum seem to have been broken somehow. For example the href of one google-link over there is simply "null". 

Yes , yes TSP

I think I was doing something wrong.

Many thanks for your support.

[pequeno]

On 29/7/2016 at 10:39 AM, TSP said:

See: http://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia

In IPS, only for post content, it would translate to something like: 

.ipsComment_content .ipsType_richText a[href^="http://"]:after, 
.ipsComment_content .ipsType_richText a[href^="https://"]:after {
    content: "\f08e";
	margin: 0 0 0 5px;
	font-family: "fontawesome";
}

/* Dont apply above styling to your own site */
.ipsComment_content .ipsType_richText a[href*="//www.yourcommunityurl.com/"]:after {
  	content: '';
  	margin: 0;
}

This should apply the external link icon from font awesome after external links: http://fontawesome.io/icon/external-link/
If you want another icon, then you need to search for the icon on the font-awesome site and replace f08e with whatever it says after "Unicode:" on the site for the page of the icon you wish to use. 

I've not tested this. You would need to remember to edit the URL in the second CSS-rule to have it not apply to internal links.

Hello, Is it possible to use a similar code to convert a link to plain text?

For example,all  links from www.onewebsite.com  dont show link, only show in plain text.

Thank you!