Subscribe to our blog!

Subscribe
icons

How to add icon to a custom section in Sitefinity Toolbox

  • Custom Icon
  • Custom Section
  • Toolbox
By on

Have you ever wanted to distinct your custom sections in the Toolbox from the other Sitefinity OOTB sections? This blog post will show you a way to achieve it. 


Option 1 - Using Toolboxes config:

1. Open the Sitefinity Web Application in Visual Studio and go to App_Data >> Sitefinity >> Configuration >> ToolboxesConfig.config

2. Find the section you’d like to customize

3. Wrap the Section’s title in span with class that will hold the styling for the custom icon like in the example below:


4. Save your changes

5. Go to the CSS file you are using for styling fixes in Sitefinity backend. Please note that the styles of your custom Theme are loaded in Page Editing mode, so you may add new css file in your theme as well as use your main theme CSS.

Here is an example of the styles that could be applied to the custom icon:

Option 2 - Using Toolbox Settings in Sitefinity backend.

1. Open Sitefinity Backend

2. Go to Adminstration >> Settings >> Advanced Settings

3. Expand Toolboxes section >> Toolboxes >> PageControls >> Sections and find the section you’d like to customize

4. Click on Section to edit its properties

5. Wrap Section’s Title in span with class that will hold the styling for the custom icon like in the example below:

SitefinityToolboxSettings

6. Save your changes

7. Perform step 5 from the previous option.

And you are done! 😊

Back To List

By continuing to use this website you are agreeing to its use of cookies. To find out more, please see our cookie policy.