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>
Found this post helpful? Help keep this blog ad-free by buying me a coffee! ☕