Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Show icon after external link using Font Awesome
@thomas-rager

This comment has been minimized.

Show comment
Hide comment
@thomas-rager

thomas-rager 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.

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

This comment has been minimized.

Show comment
Hide comment
@laymonk

laymonk 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:

<script>
        $(document).ready(function() {
            $('a[href^="http://"],a[href^="https://"]')
                .attr('target','_blank')
                .addClass('ext_link')
            ;
        });
</script>

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

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:

<script>
        $(document).ready(function() {
            $('a[href^="http://"],a[href^="https://"]')
                .attr('target','_blank')
                .addClass('ext_link')
            ;
        });
</script>

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

This comment has been minimized.

Show comment
Hide comment
@laymonk

laymonk 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

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

@johnbroeckaert

This comment has been minimized.

Show comment
Hide comment
@johnbroeckaert

johnbroeckaert Dec 5, 2017

@laymonk,
I tryed your script and it works fine!

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

@laymonk,
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