Help:External link icons

Linking and
page manipulation
Linking and diffs

External links usually display with an icon at the end of the link. CSS is used to check for certain filename extensions or URI schemes and apply an icon specific to that file type, based on the selected skin.

This page contains example URLs to demonstrate the link icons. The displayed icon only depends on the URL itself. It is not checked whether a file of that type is actually at the link. The examples here do not link to real files.

External links

The MediaWiki software detects the URI scheme and/or the filename extension to create the link; thus links without an URI will not have an external link applied. MediaWiki does not attempt to detect any part of the URL to create a link, such as www; many websites do not use www in the URL.

External link icons

PDF icons have precedence over all others— if pdf is anywhere in the filename extension, then the icon is applied. Other icons for filename extensions are applied only if the extension matches the text. Filename extension icons have precedence over URI scheme icons. Internet Explorer may show an empty space or misplaced icon if the page is rendered with a line wrap inside the link text.

External link icons
Type File extension
URI scheme		 Sample links
Portable Document Format .pdf .PDF, .pdf# .PDF# .pdf? .PDF? [note 1] http://example.org/test.pdf
Audio Video Interleave .avi .AVI http://example.org/test.avi
MPEG-1 .mpg .MPG .mpeg .MPEG http://example.org/test.mpg
Ogg .ogm .OGM http://example.org/test.ogm
MIDI .MID .midi .MID http://example.org/test.mid
.mp3 .MP3 http://example.org/test.mp3
.ogg .OGG http://example.org/test.ogg
.wav .WAV* http://example.org/test.wav
Windows Media Audio .wma .WMA http://example.org/test.wma
Internet Relay Chat irc:// ircs:// irc://example.org
File Transfer Protocol ftp:// ftp://example.org
Network News Transfer Protocol news: news:example.org
mailto mailto: mailto:example@example.org
HTTP Secure https:// https://example.org/test.html
Apache Subversion svn:// svn://example.org/
Bitcoin bitcoin:// bitcoin://example.org/
FTPS ftps:// ftps://example.org/
Geo URI geo: geo:37.786971,-122.399677
Git git:// git://example.org/
Gopher gopher:// gopher://example.org
Hypertext Transfer Protocol http:// http://example.org
Magnet URI scheme magnet:// magnet://example.org/
Multimedia Messaging Service mms:// mms://example.org/
NASA World Wind worldwind:// worldwind://example.org/
Network News Transfer Protocol nntp:// nntp://example.org/
Secure Shell ssh:// ssh://example.org/
Secure Session Initiation Protocol sips:// sips://example.org/
Session Initiation Protocol sip:// sip://example.org/
Short Message Service sms:// sms://example.org/
SSH File Transfer Protocol sftp:// sftp://example.org/
Telephone tel:// tel://example.org/
Telnet telnet:// telnet://example.org/
Uniform resource name urn: urn:isbn:0451450523
XMPP .xmpp xmpp://example.org/

Skins

Icons are defined in the CSS for each skin, except for the .pdf icon which is defined in MediaWiki:Common.css. Vector and Cologne Blue will show only the PDF icon. Modern and MonoBook will show a full set of icons for filename extensions, and icons for some URI schemes. Minerva (mobile skin) will not show any icons. The links at the top of the page can be used to view the different icon sets.

Accessibility

The link icons have no alt text, thus do not meet accessibility standards.

Custom link icons

You can add link icons by editing Special:MyPage/skin.js (current skin only) or Special:MyPage/common.js (all skins). For example, to add an icon for Excel files:

#content a[href$=".xls"].external,
#content a[href$=".XLS"].external,
#content a[href$=".xlsx"].external,
#content a[href$=".XLSX"].external
 {
    background: url("https://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
}

When successfully updated, this link will show an Excel icon:

http://example.org/test.xls

The markup detects file extensions .xls or .xlsx with both upper and lower case. The image must be 16 pixels wide and cannot be SVG format. The image link must be from http://upload.wikimedia.org. To get this link, go to the file page and click on the image to open it without the file description, then copy the URL.

To remove a default icon, simply add the CSS with no URL. For example, to remove the padlock icon when viewing secure links:

div#content a[href ^="https://"].external
 {
    background: center right no-repeat; padding-right: 18px;
}

To remove all the default icons, use this CSS:

div#content a.external 
 {
    background:none !important;
    padding: 0px !important;
}

Classes

The class plainlinks disables the link icon.

<span class="plainlinks">http://example.org/test.pdf</span>

Notes

  1. ^ The default PDF icon is a generic document icon, but is changed to Icons-mini-file acrobat.gif through MediaWiki:Common.css.

Bugs

See also