Instantly share code, notes, and snippets.

What would you like to do?
Show icon after external link using Font Awesome

This comment has been minimized.

thomas-rager commented Nov 10, 2014

I would also add a[href^="https://"]:after to support https links.
If your website is reachable over the www-subdomain, the icon must be removed for this domain too.


This comment has been minimized.

laymonk commented Nov 19, 2016

I was looking for ideas on adding fa ext links, and found this useful. Thanks for sharing. However, I recon it's better to use jQuery (like below) to select http(s) external links and add a CSS class to them, and then just style the added class. That will make all of these concerns about domain and https needless:

        $(document).ready(function() {

Then we style the CSS class:

.ext_link:after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: none;
  padding-left: 3px;

This comment has been minimized.

laymonk commented Nov 19, 2016

Caveat: In case we want avoid selecting certain domains in the selector, we add additional inequality selectors .. and if we are trying to exclude many domains, then the use of an array to define the domains and a jquery selector filter may become essential .. the general idea, being to take the logic of conditional selection out of CSS, to JS or jQuery where it should belong


This comment has been minimized.

johnbroeckaert commented Dec 5, 2017

I tryed your script and it works fine!

Could you please give me an example how to exclide the own domain?
Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment