cancel
Showing results for 
Search instead for 
Did you mean: 
webmaster
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)
11 Replies

@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>

GideonWilliams
Adventurer II

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

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?

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

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

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

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.

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

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
Community Member

UPDATE: This is easily removed by adding 

.ui-icon-extlink {display:none}

to your custom CSS.

View solution in original post