cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

Removing small external link icon

Jump to solution

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: 

281887_pastedImage_1.png

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 

Tags (1)
10 Replies
Highlighted
Community Advocate
Community Advocate

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

Highlighted

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?

0 Kudos
Highlighted

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

Highlighted

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

0 Kudos
Highlighted

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

0 Kudos
Highlighted

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.

Highlighted

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

0 Kudos
Highlighted

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.

0 Kudos
Highlighted
Community Member

UPDATE: This is easily removed by adding 

.ui-icon-extlink {display:none}

to your custom CSS.

View solution in original post

Highlighted
Community Coach
Community Coach

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