Removing small external link icon - need clear directions

[megan_fox]

How do I remove the small external link icon in Canvas? It shows up on my homepage after I have inserted a link to words or pictures.  I am a teacher - not an HTML expert - please give clear instructions.  I searched and the answers given were not that clear to me.  Can anyone "dumb it down"?  Thanks!  

[Chris_Hofer]

Hello there,  @megan_fox  Welcome to the Canvas Community.  Thank you for posting your question.  Is the icon you are referring to this one (the box with the arrow pointing upward to the right)?

If so, when you hover over that icon with your mouse, the helpful hint says, "Links to an external site."  If this is what you are trying to get rid of, I'm not sure there is a way to do this?

Sometimes, however, there are rogue icons that show up if you've previously had other content on the page but didn't fully delete the links (and therefore the HTML didn't fully remove them, either).  You might be able to try out the steps I outlined in this blog post: HTML Cleanup.  You might want to try these steps on a separate page that your students cannot see or in a sandbox course first to make sure things look the way you want.

I'm hoping this information will be of help to you.  If you're asking about something different, however, can you please clarify so that we can continue to help you?  Thanks!

[megan_fox]

Thank you Chris - you were right - the Yahoo example was what I was talking about - that's probably why I couldn't find the answer on how to remove it....haha

Thank you for taking the time to reply to my question.

[gulick_24]

@Chris_Hofer The blog link you posted isn't working anymore and I had the same question as @megan_fox. 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, 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>

[Chris_Hofer]

Hello there, @gulick_24 ...

Ah...good catch!  The broken link in my reply is most likely the result of the Canvas Community site moving to a different platform last Summer, and that is a link that didn't re-direct properly.  The working link is HTML Cleanup.  Also, you can use the search bar at the top of most pages here in the Community to search for the words HTML Cleanup, and it should come right up as one of the first search results.  Thanks!

[ajdeeley · Accepted solution]

my 2 cents if you haven't figured this one out yet.

Currently in canvas, there is a way to easily remove that little arrow icon.  Having built the link in the RCE, look at the html behind the link and adjust the <a href="...">link text</a> adding this bit as follows: <a class="external" href="...">link text</a>

make sense?  adding that class="external" definition to the link effectively hides/removes the arrow icon.  Seems that whoever wrote the global CSS didn't like the arrows as well.

[kmcgrath]

Hi, @Chris_Hofer - The HTML Cleanup link in your post above is dead...  Could you please re-post?  Thank you!

[Chris_Hofer]

Hi there, @kmcgrath ...

Ah yes...a result of moving from the old Community site to the new Community site...links that don't work.  Doh!  The new link to my write-up is:

HTML Cleanup - Canvas Community

By the way, you can also use the search box at the top of the screen (make sure to choose "All community" from the drop-down), and then search for: HTML Cleanup, and it should be one of the first results.  🙂

[kmcgrath]

thank you!