Jump to content

Add icon to external links.


pequeno

Recommended Posts

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.

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...
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!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...