External Link symbol

[EK174]

Hi
I want to know how I can insert an external link symbol next to a menu item.  The menu item will take the user to an external link. I have managed to insert the link into the menu but it doesn't show an external link symbol which would make it clear to the user that this link is an external link. 

[Dascalargo]

You can do it in CSS with the pseudo ::after element. Do you have a particular image you want to use?

[EK174]

---

@Dascalargo wrote:

You can do it in CSS with the pseudo ::after element. Do you have a particular image you want to use?

---

Hi something like the image attached. Could you please let me know exactly what code i need to paste and where? 

[EK174]

---

@EK174 wrote:

---

@Dascalargo wrote:

You can do it in CSS with the pseudo ::after element. Do you have a particular image you want to use?

---

Hi something like the image attached. Could you please let me know exactly what code i need to paste and where? 

---

[Dascalargo]

In your base.css file, add this code at the very end...

a.external::after {    
    content: "";
    width: 11px;
    height: 11px;
    margin-left: 4px;
    margin-bottom: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

Add class="external" to any links you want to have the icon.

You can play with the width, height, and margins to get the exact look you want.

[EK174]

Thanks, how and where do I add class="external" within the link I want to add an icon to?

[Dascalargo]

Sorry... You did say it was a menu entry, which means you probably don’t have easy access to add a class.

Try this instead: Where I told you to enter a.external::after, use this instead: 

a[href^="http"]:not([href*="mydomain.com"])::after

but replace mydomain.com with your own website domain.

This is saying apply this style after (the pseudo ::after element) all a tags (i.e. links) with an href attribute that starts with "http" but not those with an href attribute that includes your domain. Everything after after in the original code, all the stuff in the curly brackets, should stay.

You need to enter "http" for any external link, so we’re formatting all of those. You don’t need to use it for internal links, but a lot of people end up with internal links in their site that uses the "http" even though it’s not necessary, so the not part makes sure you don’t style any of those.

Hope this helps.

[EK174]

Do I replace the whole code that you sent first with the new one or just a.external::after  with 

a[href^="http"]:not([href*="mydomain.com"])::after

The rest of the previous code stays the same? 

[Dascalargo]

Sorry. I never saw this reply come in. Did you get it up and running?