One day I was working on my personal portfolio site, adding external links towards some of the web apps that I had built. I was about to add some external link symbols to them when all of a sudden I realized... I'm not really sure how 😶.
It's a convention of the web that you display the symbol next to any link that navigates to a different web site (i.e. a different domain than the one you are on).
On some web sites the link will open in a new tab, but on many it won't. It can be argued that it's not for the web page to decide that the link should open in a new tab since the user can always intentionally do this by either middle-clicking the link or right-clicking and selecting "Open Link in New Tab".
I turned to Google, looking for a "best-practice" way of displaying an external link symbol. Given how common the symbol is, one would expect there to be a standardized way of displaying it, right?
It turns out there isn't 😶. I came across this StackOverflow post which asks exactly this question and contains a wide array of answers ranging from using a Unicode character, to using an icon library, to using an image. And yet, none of these answers completely satisfied me. I will discuss each type of method that was suggested (I'm linking each section to the relevant answer of that post) and why I had decided against it before I present the solution that I did end up using. Hopefully you will find that solution useful too.
Unicode character
Using a Unicode character to represent the external link symbol would be the easiest solution by far. One suggestion is to use the North East Arrow Unicode character ↗. It looks pretty similar to the external link symbol, but alas, where's the box?!
As of this writing, there are 144 697 different Unicode characters and one would think that there would be one to represent an external link! It turns out that this had been proposed, but the proposal was rejected. In my understanding the reason for the rejection was that the symbol does not represent "plain text" in the sense that it doesn't constitute the informational content on the page. To justify this practically, if you would copy and paste some text off of a web page, you wouldn't want the external link symbols to come along with the text. Ok, fair enough...
Icon library
It turns out that some icon libraries, such as Font Awesome 5, do feature an external link symbol (see the Solid Icons cheat sheet).
It looks nice and you can easily adjust the symbol's size and color. This would probably have been my solution of choice if my project had an icon library included. However, it didn't, and I wasn't going to add an entire icon library to my project for just this one symbol.
Raster image
The answer featuring the image presents the following CSS code:
I like the fact that it's expressed as a CSS rule because that way we aren't duplicating the code for the symbol, and it removes clutter from the HTML code.
However, I don't like using raster images for things like icons. They don't remain crisp when viewed on a screen that is scaled (think of Retina displays), and if the user should increase the browser's zoom level, the image will also become blurred. There's also no easy way to change the image's color or to resize it without distorting it.
SVG image
The answer with the SVG image presents the following CSS code:
This CSS rule comes very close to being my preferred solution. The only nit-pick I have is that the SVG code is completely shrouded as a base-64 string. I prefer including the SVG code as a URL-encoded XML string for transparency.
My preferred solution
I ended up using the following CSS rule:
Which could be used as:
Granted, the fact that the SVG code has to be URL-encoded makes parts of it a bit cryptic, but at least you can still read it for the most part. You could even easily change the color should you want to (which is specified here as stroke='#666').
Ultimately, in a project that is already using an icon library I would first check to see if it includes an external link symbol and use that if it does. Otherwise I would use the aforementioned CSS rule. In both cases we are using vector graphics, so there are no issues related to resizing, and the color can easily be changed if desired.
Top comments (0)