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 

[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;
}

[GideonWilliams]

That is great to know and I have just tested - many thanks michelle1.krummel@cms.k12.nc.us

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?

[michelle1_krumm]

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

[GideonWilliams]

Hi webmaster@aitt.com.au

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]

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

[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]

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

[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.

[webmaster · Accepted solution]

UPDATE: This is easily removed by adding 

.ui-icon-extlink {display:none}

to your custom CSS.

[rogrant]

webmaster@aitt.com.au,

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