Create a gist now

Instantly share code, notes, and snippets.

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

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.

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;

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

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