Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted July 24, 20168 yr 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?
July 29, 20168 yr 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.
July 29, 20168 yr 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.
July 29, 20168 yr Author 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; }
July 29, 20168 yr 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.
July 29, 20168 yr Author Hello TSP Works!. Seems that effectively I dont use the "font-family" first time. Sorry
July 29, 20168 yr 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".
July 29, 20168 yr Author 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.
August 22, 20177 yr Author 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!
Archived
This topic is now archived and is closed to further replies.