I’ve implemented a small extension for edit mode. In All Properties view you can set an icon for tabs.
To add an icon you should add an InitializableModule and use TabIconResolver. TabIconResolver has SetIcon method used to setting the tab icon.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))] public class TabIconsInitialization : IInitializableModule { public void Initialize(InitializationEngine context) { var tabIconResolver = ServiceLocator.Current.GetInstance<TabIconResolver>(); tabIconResolver.SetIcon("Contact", "epi-iconUser"); tabIconResolver.SetIcon("Metadata", "epi-iconSearch"); tabIconResolver.SetIcon("SiteSettings", "epi-iconWebsite"); } public void Uninitialize(InitializationEngine context) { } } |
You can also display an icon without a title. For example for Settings tab we will have only the “cog” icon.
To hide the title use TabIconResolver and call SetTitleVisible method.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))] public class TabIconsInitialization : IInitializableModule { public void Initialize(InitializationEngine context) { var tabIconResolver = ServiceLocator.Current.GetInstance<TabIconResolver>(); tabIconResolver.SetIcon("Contact", "epi-iconUser"); tabIconResolver.SetIcon("Metadata", "epi-iconSearch"); tabIconResolver.SetIcon("SiteSettings", "epi-iconWebsite"); // Hiding the text for Settings tab tabIconResolver.SetTitleVisible("Advanced", false); } public void Uninitialize(InitializationEngine context) { } } |
Source code is available on Github