Episerver icons - use them!
When creating Episerver tools, editors and plugins, maintaining a consistent look and feel is a good thing. Read more, and see a long list of button classes on the Epinova-blog.
If we dive inside the EPiServer.CMS.UI package, the file ToolButton.css can be found in /App_Themes/Default/Styles/ inside the archive CMS.zip located in the folder /content/modules/_protected/CMS/ - it contains the icons for all these buttons. But how do they all look?
Like this! This blog post is mostly for future reference for myself.
| Name | CSS class | Icon |
|---|---|---|
| Add | epi-cmsButton-Add |
|
| AddFile | epi-cmsButton-AddFile |
|
| AddFiles | epi-cmsButton-AddFiles |
|
| AddOff | epi-cmsButton-AddOff |
|
| AddUser | epi-cmsButton-AddUser |
|
| AddUserGroup | epi-cmsButton-AddUserGroup |
|
| AdminMode | epi-cmsButton-AdminMode |
|
| ArrowLeft | epi-cmsButton-ArrowLeft |
|
| ArrowRight | epi-cmsButton-ArrowRight |
|
| Cancel | epi-cmsButton-Cancel |
|
| Check | epi-cmsButton-Check |
|
| CheckBoxOff | epi-cmsButton-CheckBoxOff |
|
| CheckBoxOn | epi-cmsButton-CheckBoxOn |
|
| CheckOff | epi-cmsButton-CheckOff |
|
| CheckinVersion | epi-cmsButton-CheckinVersion |
|
| Compare | epi-cmsButton-Compare |
|
| Copy | epi-cmsButton-Copy |
|
| CopyToClipboard | epi-cmsButton-CopyToClipboard |
|
| CreateFolder | epi-cmsButton-CreateFolder |
|
| Cut | epi-cmsButton-Cut |
|
| DelayPublish | epi-cmsButton-DelayPublish |
|
| Delete | epi-cmsButton-Delete |
|
| DeleteFolder | epi-cmsButton-DeleteFolder |
|
| DeleteLanguage | epi-cmsButton-DeleteLanguage |
|
| DeleteOff | epi-cmsButton-DeleteOff |
|
| Down | epi-cmsButton-Down |
|
| DownOff | epi-cmsButton-DownOff |
|
| Edit | epi-cmsButton-Edit |
|
| EditMode | epi-cmsButton-EditMode |
|
| EditOff | epi-cmsButton-EditOff |
|
| Export | epi-cmsButton-Export |
|
| Favorite | epi-cmsButton-Favorite |
|
| File | epi-cmsButton-File |
|
| FileManagement | epi-cmsButton-FileManagement |
|
| FolderUp | epi-cmsButton-FolderUp |
|
| Help | epi-cmsButton-Help |
|
| Import | epi-cmsButton-Import |
|
| LanguageOverview | epi-cmsButton-LanguageOverview |
|
| LanguagePage | epi-cmsButton-LanguagePage |
|
| LanguageProperty | epi-cmsButton-LanguageProperty |
|
| LanguageSettings | epi-cmsButton-LanguageSettings |
|
| Locked | epi-cmsButton-Locked |
|
| LogOut | epi-cmsButton-LogOut |
|
| MySettings | epi-cmsButton-MySettings |
|
| NewFile | epi-cmsButton-NewFile |
|
| NewPage | epi-cmsButton-NewPage |
|
| OpenInWindow | epi-cmsButton-OpenInWindow |
|
| Paste | epi-cmsButton-Paste |
|
| epi-cmsButton-Print |
|
|
| Property | epi-cmsButton-Property |
|
| Publish | epi-cmsButton-Publish |
|
| QuickEdit | epi-cmsButton-QuickEdit |
|
| Redo | epi-cmsButton-Redo |
|
| Refresh | epi-cmsButton-Refresh |
|
| RenameFolder | epi-cmsButton-RenameFolder |
|
| Report | epi-cmsButton-Report |
|
| ReportCenter | epi-cmsButton-ReportCenter |
|
| Revert | epi-cmsButton-Revert |
|
| Save | epi-cmsButton-Save |
|
| SavePublish | epi-cmsButton-SavePublish |
|
| SaveShow | epi-cmsButton-SaveShow |
|
| Search | epi-cmsButton-Search |
|
| Security | epi-cmsButton-Security |
|
| StickyEditOff | epi-cmsButton-StickyEditOff |
|
| StickyEditOn | epi-cmsButton-StickyEditOn |
|
| Undo | epi-cmsButton-Undo |
|
| Unlocked | epi-cmsButton-Unlocked |
|
| Up | epi-cmsButton-Up |
|
| UpOff | epi-cmsButton-UpOff |
|
| ViewMode | epi-cmsButton-ViewMode |
|
| Warning | epi-cmsButton-Warning |
|
| Window | epi-cmsButton-Window |
|
| WindowSplit | epi-cmsButton-WindowSplit |
|
| crop | epi-cmsButton-crop |
|
| fliph | epi-cmsButton-fliph |
|
| flipv | epi-cmsButton-flipv |
|
| resize | epi-cmsButton-resize |
|
| rotateccw | epi-cmsButton-rotateccw |
|
| rotatecw | epi-cmsButton-rotatecw |
|
| transform | epi-cmsButton-transform |
|
Still reading? How can the classes be used? Create a button like this:
<span class="epi-cmsButton">
<asp:Button runat="server" Text="Click me!" OnClick="DoStuff"
CssClass="epi-cmsButton-text epi-cmsButton-tools epi-cmsButton-Add" />
</span>