A Little Bit of This

Source code

---

Add an "external link" icon to links using CSS

30 Apr 2021 - jeff

Add an “external link” icon to links using CSS, and have the ability to disable them

While working on phpCollab, I wanted some way to indicate when a link wouold lead the user away from the site. To accomplish this, I used FontAwesome (for the icon) and some CSS code.

After looking around for some ideas, Here is the CSS code I came up with:

a[href^="mailto:"]:not(.noIcon)::after {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
    margin-left: .5em;
    display: inline-block;
    opacity: 0.45;
}

a[href^="http"]:not(.noIcon)::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free", sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    text-decoration: none;
    margin-left: .5em;
    display: inline-block;
    padding-right: 2px;
    opacity: 0.45;
}


a[href^="http"]:hover:after {
    opacity: 90%;
}

Usage:

With icon: example.com

<a href="https://example.com">example.com</a>

Without Icon: example.com

<a class="noIcon" href="https://example.com">example.com</a>