Is there a way to put a icon in the headers on the Category page?

Hey Brittany,

If you have custom PNG icons that you want to use in your Zendesk Guide theme, you can upload these images as assets and then modify the HTML and CSS to display them in front of the text on your Category and Section pages. Here's how you can do it:

Step 1: Upload Your Icons as Assets

1. In Zendesk Guide, go to Guide Admin by clicking the Customize design icon in the sidebar.
2. Click on Theme and then on Edit Code.
3. In the Assets folder, click Add asset and upload your PNG icons. Remember the names of the uploaded files, as you'll need them for your HTML.

Step 2: Modify the HTML Templates

Next, you'll need to insert these images into the category_page.hbs and section_page.hbs templates. You'll use an <img> tag for this purpose. For example, if you have a specific icon for a category or section, you could modify the templates as follows:

<!-- For category_page.hbs --> <h2>  <img src="{{asset 'your-icon-name.png'}}" alt="Icon description" class="custom-icon">  {{title}} </h2>

And similarly for section_page.hbs. Make sure to replace 'your-icon-name.png' with the actual file name of your icon. The alt attribute should be a brief description of the icon for accessibility purposes.

Step 3: Add CSS for Styling

You might want to adjust the size, alignment, or other aspects of how your icons are displayed. You can do this in the style.css file of your theme:

.custom-icon {  width: 20px; /* Adjust as needed */  height: 20px; /* Adjust as needed */  margin-right: 10px; /* Space between the icon and the text */  vertical-align: middle; /* Aligns the icon with the middle of the text line */ }

Step 4: Publish Your Changes

After adding your icons and adjusting your HTML and CSS, preview your changes to make sure they look as expected. Zendesk Guide allows you to preview your theme directly in the theme editor. Once you're satisfied with how the icons are displayed, publish your theme to make the changes live for all users.

Additional Considerations

• Performance: Keep your icons' file sizes as small as possible to ensure your pages load quickly.
• Accessibility: Use appropriate alt text for your icons if they convey meaning. If they are purely decorative, you can use alt="" to indicate this to screen readers.
• Consistency: Ensure your icons are stylistically consistent with each other and with the overall design of your help center for a cohesive user experience.

Hope this helps!

Brandon