Product Code Database
Example Keywords: tie -pants $21-144
   » » Help: External Link Icons
Tag Help 'External Link Icons'.
Tag

Help:External link icons
 (

Rank: 85%
Bluestar Bluestar Bluestar Bluestar Blackstar

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

This page contains example URL's 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 software detects the 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 ; many websites do not use 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
irc://example.org
ftp://example.org
mailto:example@example.org
https://example.org/test.html


Skins
Icons are defined in the CSS for each skin, except for the icon which is defined in . Chick, Classic, Cologne Blue, MySkin and Nostalgia will show only the PDF icon. Modern and MonoBook will show a full set of icons; Simple uses the same set, but does not include the audio and video link icons. Vector uses a different full set of icons. The links at the top of the page can be used to view the different icon sets.


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

  1. content ahref$=".xls".external,
  2. content ahref$=".XLS".external,
  3. content ahref$=".xlsx".external,
  4. content ahref$=".XLSX".external
{
   background: url("http://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:

  1. content ahref.external
{
   background: center right no-repeat; padding-right: 18px;
     
}


Classes
The class disables the link icon.


Notes

See also

Account

Social:
Pages:  ..   .. 
Items:  .. 

Navigation

General: Atom Feed Atom Feed  .. 
Help:  ..   .. 
Category:  ..   .. 
Media:  ..   .. 
Posts:  ..   ..   .. 

Statistics

Page:  .. 
Summary:  .. 
1 Tags
8/10 Page Rank
1433 Page Refs