Removing small external link icon

[webmaster]

Hi, 

One of my navigation buttons links to an external site outside of Canvas, and it adds in the little 'external link' icon, which throws the height of that particular button out of sync with the rest. 

See example here: 

Just wondering if there's a quick fix to remove this, it's not appearing in the code so I'm assuming it's being added via the Rich Content Editor. 

I searched for any previous threads on this topic, this one (https://community.canvaslms.com/thread/1841 ) came up from 3 years ago, but was regarding use in a table and the solution does not work for me.

Cheers,

Liam 

[webmaster · Accepted solution]

UPDATE: This is easily removed by adding 

.ui-icon-extlink {display:none}

to your custom CSS.

[Robbie_Grant]

 @webmaster ,

As far as I am aware of, there is no way to remove this external link icon.  It is added automatically by the RCE to show that the link will take you outside of Canvas.

Robbie

[gulick_24]

@Robbie_Grant  I don't use custom CSS, I'm just looking for an HTML solution, as the little icon only appears sporadically for me. I've tried removing target="_blank" rel="noopener" from the HTML code, but the little icon still appears (even when toggling back to HTML view shows that the deleted code remains deleted).

I've tried removing target="_blank" rel="noopener" from the HTML code, but the little icon still appears (even when toggling back to HTML view shows that the deleted code remains deleted). BUT, adding "external" like @ajdeeley mentioned here, works perfectly! So my old code:

a class="instructure_file_link inline_disabled" href="https://newark.osu.edu/future-students/financial-aid/">Contact the OSU Office of Financial Services</a></strong></td>

Becomes: (adding "external" followed by a space, then the "instructure...")

a class="external" "instructure_file_link inline_disabled" href="https://newark.osu.edu/future-students/financial-aid/">Contact the OSU Office of Financial Services</a></strong></td>

[webmaster · Accepted solution]

UPDATE: This is easily removed by adding 

.ui-icon-extlink {display:none}

to your custom CSS.

[mclag011]

Thank you Liam. Is there a way to do this with inline CSS? At our level we are unable to change the CSS and when I try to apply styling markup on a page it is removed by the LMS. I just though I would ask. Thank you for your time.

[michelle1_krumm]

I am also trying to remove this link icon from buttons and am limited to inline CSS. Any luck finding a solution?

[mclag011]

I don't know if this is something that is pertinent to my college's version of Canvas but for button links that I wanted to remove the external link icon I added the class "external". Here is an example:

<a href="https://www.google.com" class="Button Button--primary bs-btn-sm external">Google</a>

The important part is that you add it to the URL tag and that you put a space between the other classes (since those classes may be implementing the style used with your button.)

I hope to see if this works for you because then this may be a feature in Canvas's default CSS.

[michelle1_krumm]

Yes!!! It worked! Thank you so much!

[GideonWilliams]

Hi  @webmaster 

I have tried to apply the code to normal text hyperlinks but sadly this does not have the same effect. Might you know what the CSS is for this?

Many thanks in advance, Gideon

[michelle1_krumm · Accepted solution]

It is still working for me: <a class="external" href="url">TEXT</a>

[GideonWilliams]

That is great to know and I have just tested - many thanks  @michelle1_krumm 

I was sort of hoping to put in a fix at CSS level that then meant I (or others) did not have to add in the extra bit via HTML each time?

[daniela_aguado]

@michelle1_krumm, thank you so much for your post. This solution worked for me as I was looking for an inline CSS solution. 🙌

[GideonWilliams]

Thanks to all. 

Just needed to add in the !important feature to the CSS script to get it to work for me:

.ui-icon-extlink {
display:none !important;
}