Icon Types:

  • A. Clickable icons
    • standalone icons, independent of surrounding text, clickable, link/action associated per icon
  • B. Decorative icons
    • text accompanied by background images, non individual clickable, link/action associated per whole text+icon

A. Type: Clickable icons

  • There are several ways to have standalone clickable icons, by using links or form inputs; and by placing a direct image or using it as a background-image
    • using <a href=''/> links
      • using <... class=''/> + .css or ssx
      • using <img src=''/> 
    • using <input /> form actions
      • using <input class=''/> + .css or ssx
      • using <input type='image' src=''/>
  • Note: if the icon is on the same row as the text, there might be some problems with the text/icon alignment. Depending on the markup used for the icon there are several manual solutions (float, fixed heights, vertical-aligment, etc.). You can use the standard .icon class to assure the alignment
  • Note: although in the CSS-capable browsers clickable actions will be displayed just as icons, please don't forget to add title, alt attributes, the text-indent: -9999px accessibility workaround, etc. to describe the functionality also when the icons are missing (older text browsers)

 A1. Standard: .icon class

Standard: .icon 
  • Styles added by this commit
  • Class used in conjunction with <img/> tag
Example

iconA1.png

HTML
<a href="...">
  <img class="icon" title="RSS feed for wiki updates" alt="(RSS)" src="$xwiki.getSkinFile('icons/xwiki/rss-medium.png')"/>
</a>
CSS
.icon {
 vertical-align: middle;
}

 A2. Standard: input.icon-button + .add-button, .remove-button, .accept-button, .search-button classes

Standard: input.icon-button
Types: .add-button, .remove-button, .accept-button, .search-button
  • Styles added by XWIKI-7463
  • Classes used in conjunction with input buttons
Example

iconA2.png

HTML
<input type="button" class="icon-button remove-button" value="Delete" title="Delete this file" />
CSS
input.icon-button {
 background: transparent none center center no-repeat;
 border: 0 none;
 font-size: 80%;
 height: 16px;
 margin: 0;
 padding: 0;
 text-indent: -9999px;
 width: 16px;
}

.icon-button.add-button {
 background-image: url('$xwiki.getSkinFile(icons/silk/add.png));
}
 
.icon-button.remove-button {
 background-image: url('$xwiki.getSkinFile(icons/silk/cross.png));
}

.icon-button.accept-button {
 background-image: url('$xwiki.getSkinFile(icons/silk/accept.png));
}

.icon-button.search-button {
 background-image: url('$xwiki.getSkinFile(icons/xwiki/search.png));
}

B. Type: Decorative icons

  • Decorative icons are implemented using background-images that accompany text elements, they are non-individual clickable and together with the text element have a single link/action associated

 B1. Standard: .hasIcon class

Standard: .hasIcon
Types: .iconRSS
  • Styles added by this commit
  • Classes used when background-images are needed and a single action/link is available
Example

iconB1.png

HTML
<a href="..." class="hasIcon iconRSS">RSS feed for search on [xwiki]</a>
CSS
.hasIcon {
 background: none no-repeat scroll 0 0 transparent;
 padding-left: 20px;
}

.iconRSS {
 background-image: url("$xwiki.getSkinFile('icons/silk/feed.png')");
}

B1.1. Custom case: Action Menus

Standard: .hasIcon
Custom: .actionmenu .hasIcon
Custom: .actionmenu (.tmCreate, .tmWiki, .tmSpace, .tmPage, .tmEdit, etc.) (36 classes)
  • Note: Action menus code was written before the creation of the more generic .hasIcon class. Eventually all the specific actionmenu classes should be rewritten to be more generic
  • Styles added by XSCOLIBRI-146
Example

iconB11.png

HTML
<div class="actionmenu">
  <div class="hasIcon tmWiki"><a href="." class="tme">Wiki</a> ... </div>
</div>
CSS
/* Menu overrides standard .hasIcon class with custom styles */
.actionmenu .hasIcon {
 background: none no-repeat scroll 0 3px transparent;
 padding: 0;
}
.actionmenu .hasIcon a.tme {
 padding-left: 20px;
}
...
.actionmenu .tmWiki {
 background-image: url("$xwiki.getSkinFile('icons/silk/world.png')");
}
...

Other Links

Tags:
Created by Vincent Massol on 2017/09/04
   

Get Connected