Standard Icon Classes
Last modified by Lucas Charpentier (Sereza7) on 2024/01/16
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=''/>
- using <a href=''/> links
- 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, or use a .sr-only workaround to describe the functionality, according to our HTML codestyle. This is also useful when the icons are missing (older text browsers).
A1. Standard: .icon class
- Styles added by this commit
- Class used in conjunction with <img/> tag
Example
HTML
<a href="...">
<img class="icon" title="RSS feed for wiki updates" alt="(RSS)" src="$xwiki.getSkinFile('icons/xwiki/rss-medium.png')"/>
</a>
<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;
}
vertical-align: middle;
}
A2. Standard: input.icon-button + .add-button, .remove-button, .accept-button, .search-button classes
- Styles added by XWIKI-7463
- Classes used in conjunction with input buttons
Example
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));
}
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
- Styles added by this commit
- Classes used when background-images are needed and a single action/link is available
Example
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')");
}
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
- 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
HTML
<div class="actionmenu">
<div class="hasIcon tmWiki"><a href="." class="tme">Wiki</a> ... </div>
</div>
<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')");
}
...
.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
- More XWiki icon research
- IconThemes idea XWIKI-8501
- Special CSS Classes
