Adding an arrow icon to external links in Joomla

Many websites automatically add an arrow icon to links pointing to external addresses. Most notable example is Wikipedia, but there are many other sites that do the same.

Here is what I did to add similar arrows to my Joomla-based website.

Adding CSS code to your theme

All you basically have to do is add a little piece of CSS code to your theme. For the Cassiopeia theme — which is the default theme in Joomla versions 4 and 5 — you should create a file user.css (if it doesn't already exist) at this location:

media/templates/site/cassiopeia/css/user.css

The actual CSS code

And here is the piece of CSS code you will have to add:

div.item-content a[target="_blank"]::after,                /* home */
div.item-intro a[target="_blank"]::after,                  /* article overviews */
div.com-content-article__body a[target="_blank"]::after {  /* articles */
  -webkit-padding-end: 3px;
  padding-inline-end: 3px;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 900;
  content: "\202f\f35d";
  }

As you can see, I start with specifying the ::after pseudo-classes of the HTML elements where I want the arrow to be added. I found these elements by simply looking at the source code of my (i.e. this) website.

Note that the elements selected are not external links in a strict sense; here we select the elements with the property "target=_blank" set.

The code for the arrow itself is specified in the last line: \f35d denotes an arrow in a box in Font Awesome. I have it preceded with a narrow non-break space (NNBSP): \202f in Unicode.

And that is all there is to it. If the arrows don't show up in your site after adding this piece of code, try flushing the cache.

NOTE: please be advised that Joomla version 5 comes with version 6 of Font Awesome Free, so you'll need to update the CSS code above to 'Font Awesome 6 Free' for this to work after upgrading Joomla from version 4 to version 5.