Removing the External Link Icon Globally

[Buhle]

Hello,

Is there any way to remove the icon that is now showing up next to all external links in Canvas, since it was updated within the 9-28-22 release? The icon is showing up on the links on Canvas login page too.

We have tried a few things, as suggested by other members here on Canvas Community, including:

.ui-icon-extlink {display:none}

and

a.external {display: none;}

None of these are working.

Please advise. Many thanks!

Buhle

[DrNufer · Accepted solution]

One thing that worked for me was setting the class in the anchor tag to "external".  This is using the inline CSS.  It might look something like:

<a class="external" href="https://bit.ly/IO561Su2" target="_blank">...

[Buhle]

Hi there,

Thank you so much for your suggestion! 

This works, however, we have a bunch of live and existing courses and it would take forever to add it manually to all links. So we are looking for a more global solution.

[matthew_buckett]

To disable the link icon globally you could add this to the CSS in the current theme:

a.external > .external_link_icon { display: none }

This should remove all the icons that indicate and external link.

[chris_rains]

Hi Matthew,

This CSS seemed to work in Canvas for us but after the recent RCE it appears to have affected this code and the external link has reappeared. We tried to re-upload the CSS to our theme but it didn't do the trick. Any other ideas on how we could remove the external link icon using the theme editor?

Thanks!

[matthew_buckett]

When an external link is inserted now and it includes some inline CSS which is considered more specific than the previous CSS rule, here's an example of the icon added:

<span class="external_link_icon" style="margin-inline-start: 5px;display: inline-block;" role="presentation">...

so the 'display: inline-block' is more specific than the CSS in your theme. You can make your CSS more forceful and overwrite this by adding the 'important' flag to the rule with:

a.external > .external_link_icon { display: none !important }

This should again hide the icon.

[chris_rains]

Thanks, Matthew...worked like a charm!

[Buhle]

Hi there,

Thank you so much for your suggestion!

This works, however, we have a bunch of live and existing courses and it would take forever to add it manually to all links. So we are looking for a more global solution.