Richardpruen: 1 revision imported

2022-01-01T18:32:44Z

1 revision imported

← Older revision	Revision as of 19:32, 1 January 2022
(No difference)

Wikipedia>Izno: /* Custom link icons */ remove this restriction - likely pertaining to IE < 9, which MediaWiki no longer supports

2021-09-15T03:13:08Z

Custom link icons: remove this restriction - likely pertaining to IE < 9, which MediaWiki no longer supports

New page

{{imbox
| type = notice
| name = info
| text = In the default skin on desktop ([[mw:Skin:Vector|Vector]]), en.Wikipedia uses only two external link icons; one for [[PDF]] documents and the other for all other external links. Some other skins use additional icons.
}}{{Wikipedia how to}}
{{ombox
| image = [[File:Gnome-applications-science.svg|42px]]
| text = You can test how this page looks in the different skins with these links:
<div style="text-align:center; font-size:90%">{{select skin}}</div>
}}{{Linking and page manipulation|linking and diffs}}
External links usually display an icon at the end of the link. CSS is used to check for certain [[filename extension]]s or [[URI scheme]]s and apply an icon specific to that file type, based on the selected [[Wikipedia:Skin|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.

== Explanation ==
[[MediaWiki]] software detects [[URI scheme]]s and/or [[filename extension]]s to create a 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 {{code|www}}, which many websites do not use in the URL.

The standard Wikipedia skin, ''[[WP:Vector|Vector]]'', shows only PDF icons, as does ''Cologne Blue''. ''Modern'', ''MonoBook'' and ''Timeless'' show a full set of filename extensions icons and some URI scheme icons; ''Minerva'' (mobile) shows none. Icons are defined in the CSS for each skin except for the PDF icon, which is displayed if ''"pdf"'' is anywhere in the filename extension.{{efn|name=common.css}}

Filename extension icons are displayed 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. Link icons do not adhere to [[MOS:ACCESS|accessibility standards]], since alt text cannot be added.

== Example ==
{| class="wikitable"
! colspan=3 style="text-align:center;font-size:90%;font-weight:normal;"| [[File:Gnome-applications-science.svg|left|38px]] '''Use these links to view this page with a different skin:'''<br/>{{select skin}}
|-
! Type !! File extension !! Sample link
|-
| [[Portable Document Format]] || .pdf .PDF, .pdf# .PDF# .pdf? .PDF? || 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 Vorbis]] || .OGG || http://example.org/test.ogg
|-
| [[WAV|Waveform Audio File Format ]] || .WAV* || http://example.org/test.wav
|-
| [[Windows Media Audio]] || .wma .WMA || http://example.org/test.wma
|-
! Type !! URI scheme !! Sample link
|-
| [[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]] || <nowiki>bitcoin://</nowiki> || bitcoin://example.org/
|-
| [[FTPS]] || ftps:// || ftps://example.org/
|-
| [[Geo URI]] || geo: || geo:37.786971,-122.399677
|-
| [[Git (software)|Git]] || <nowiki>git://</nowiki> || git://example.org/
|-
| [[Gopher (protocol)|Gopher]] || gopher:// || gopher://example.org
|-
| [[Hypertext Transfer Protocol]] || http:// || http://example.org
|-
| [[Magnet URI scheme]] || <nowiki>magnet://</nowiki> || 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]] || <nowiki>sips://</nowiki> || sips://example.org/
|-
| [[Session Initiation Protocol]] || <nowiki>sip://</nowiki> || sip://example.org/
|-
| [[Short Message Service]] || <nowiki>sms://</nowiki> || sms://example.org/
|-
| [[SSH File Transfer Protocol]] || sftp:// || sftp://example.org/
|-
| Telephone || <nowiki>tel://</nowiki> || tel://example.org/
|-
| [[Telnet]] || telnet:// || telnet://example.org/
|-
| [[Uniform resource name]] || urn: || urn:isbn:0451450523
|-
| [[XMPP]] || <nowiki>xmpp://</nowiki> || xmpp://example.org/
|-
|}

== Hiding link icons ==

A link icon can be hidden with the {{code|plainlinks}} class or {{tl|Plainlink}}, but this is not advisable.
<syntaxhighlight lang="html4strict"><span class="plainlinks">http://example.org/test.pdf</span></syntaxhighlight>

== Custom link icons ==
Custom icons can be added by editing [[Special:MyPage/skin.css]] (current skin only) or [[Special:MyPage/common.css]] (all skins). For example, to add an icon for Excel files:
<syntaxhighlight lang="css">
#content a[href$=".xls"].external,
#content a[href$=".XLS"].external,
#content a[href$=".xlsx"].external,
#content a[href$=".XLSX"].external {
background: url("http://upload.wikimedia.org/wikipedia/commons/b/ba/Page_white_excel.png") center right no-repeat; padding-right: 18px;
}
</syntaxhighlight>

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. 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:
<syntaxhighlight lang="css">
#content a[href ^="https://"].external {
background: center right no-repeat;
padding-right: 18px;
}</syntaxhighlight>

To remove all the default icons, use this CSS:
<syntaxhighlight lang="css">
#content a.external {
background: none !important;
padding: 0 !important;
}</syntaxhighlight>

== Bugs ==
* [[:bugzilla:20024|bug 20024]] - a destination-dependent icon should be shown for interwiki links
* [[:bugzilla:30682|bug 30682]] - Link icon inconsistencies when using protocol relative URLs
* [[:bugzilla:45891|bug 45891]] - External link icons should have alt text
* [[:bugzilla:54604|bug 54604]] - Large number of CSS rules for external links - (re-opened)
* <s>[[:bugzilla:61178]]</s> - Remove yellow padlock icons on HTTPS links - (and discussion for Enwiki at [[MediaWiki talk:Vector.css#Padlock for secure links]])
* <s>[[:bugzilla:63521]]</s> - Default external link icons should be a module

== See also ==
{{commonscat|External link icons}}
* [[Wikipedia:Manual of Style/Linking#Non-English-language sites]]
* [[Help:Link#External links]]
* [[Wikipedia:External links]]

== Notes ==
{{notelist|refs=
{{efn|name=common.css|The default PDF icon is a generic document icon, but is changed to [[File:Icons-mini-file acrobat.gif]] through [[MediaWiki:Common.css|Common.css]].}}
}}

[[Category:Wikipedia link help]]

Help:External link icons - Revision history

Richardpruen: 1 revision imported

Wikipedia>Izno: /* Custom link icons */ remove this restriction - likely pertaining to IE < 9, which MediaWiki no longer supports