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
 
Print 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>

Button with the text