How to add icons/symbols to article titles

1263169183150 do you have any suggestions for my previous post?

Hi

We currently have the following structure Category - Section - Articles with the Category and Sections showing as below

Category:

How To section:

We have added 2 further sections under How To - Onboarding is there anyway I can add the icons and tiles to the subsections under Onboarding? I have tried copying the code used for the sections and adjusting but it didn't work and returned errors. 
 

This is our code to show the sections under the category

CategoryHowTo.hbs:

<div class="container-divider"></div>
<div class="container">
 <nav class="sub-nav">
   {{breadcrumbs}}
   <div class="search-container">
     <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
       <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
       <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
     </svg>
     {{search scoped=settings.scoped_kb_search submit=false}}
   </div>
 </nav>

 <div class="container">
 <section class="section knowledge-base">
   <h2 class="visibility-hidden">{{ t 'sections' }}</h2>
   <h1> Hi {{user_name}}. Welcome to the How To section! How can we help you today?</h1>
   <section class="categories blocks">
     
     <ul class="blocks-list">
       {{#each sections}}
         <li class="blocks-item">
<a href='{{url}}' class="blocks-item-link">
{{#is name 'How To'}}
<img  src= "{{asset 'Help_Centre_Icons_EA_FAQ_Icon_smaller.png'}}" class = "home-page-images" />
{{/is}}
{{#is name 'PLatform Navigation'}}
<img src="{{asset 'Help_Centre_Icons_1_EAU.png'}}" class = "home-page-images" />
{{/is}}
{{#is name 'Admin User Space'}}
<img src="{{asset 'Help_Centre_Icons_2_EAU.png'}}" class = "home-page-images" />
{{/is}}
{{#is name 'FAQ'}}
<img src="{{asset 'Help_Centre_Icons_3_1.png'}}" class = "home-page-images" />
{{/is}}
    <h4 class="blocks-item-title">{{name}}</h4>
<p class="blocks-item-description">{{excerpt description}}</p>
</a>
</li>
       {{/each}}
     </ul>
   </section>
   </section>
 </div>
  </div>
 </div>
</div>

hey, 

1). Go to homepage and paste the code, I have added the icons beside the section title, you will need to update the section IDs and icons which you have already uploaded in your assets folder.

Home Page:

<section class="hero-unit search-box">
{{search}}
</section>

<section class="knowledge-base">
{{#if categories}}
<div class="category-tree">
{{#each categories}}
<section class="category">
{{#if ../has_multiple_categories}}
<h2><a href="{{url}}">{{name}}</a></h2> 
{{/if}}
{{#each sections}}
<section class="section">
<h3>

<div class="section-title-image">
<img src="{{asset id prefix='section-' suffix='.png'}}"/>
</div>

{{#if internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}} 
<a href="{{url}}">{{name}}</a>
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li {{#if promoted}} class="article-promoted" {{/if}}>
{{#if promoted}}
<span data-title="{{t 'promoted'}}">★</span>
{{/if}}
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
<i class="section-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/if}}
</section>
{{else}}
<i class="category-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/each}}

{{#if more_sections}}
<div>
<a href="{{url}}">{{t 'see_all_sections'}}</a>
</div>
{{/if}}
</section>
{{/each}}

{{pagination}}
</div>
{{/if}}
</section>

<section class="community">
{{#if help_center.community_enabled}}
<h4>
{{t 'community'}}
{{#link 'community'}}
{{t 'browse'}}
{{/link}}
</h4>
{{/if}}
{{recent_activity scope='community'}}
</section>

2). Go to the section page and paste this code, I have added the icon code here because you want to show the icon on the section page also.

Section Page:

<nav class="sub-nav">
  {{breadcrumbs}}
  {{search}}
</nav>

<header class="page-header section-page-header">
  <h1> 
    
     <div class="section-title-image">
     <img src="{{asset section.id prefix='section-' suffix='.png'}}"/>
  </div>

    {{section.name}}


{{#if section.internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}}

  </h1>
  <span>{{subscribe}}</span>
</header>

<p>{{section.description}}</p>

{{#if section.articles}}
<ul class="article-list">
  {{#each section.articles}}
  <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">
     {{title}}
    </a>
  </li>
  {{/each}}
</ul>
{{else}}
<i class="section-empty">
  <a href="{{section.url}}">{{t 'empty'}}</a>
</i>
{{/if}}

{{pagination}}

3). Add your icons in your assets folder and the icon name would be like this: 

section-2222222.png , 

section-00000000.png , 

section-9999999.png

the numbers are section's IDs.

4). Add this CSS code snippet at your stylesheet.

.category-tree .section h3, .section-page-header h1{
  display: flex;
    align-items: center;
}

.section-title-image img{
  width: 50px;
    margin-right: 10px;
}

If any issue, let me know.

Have Good Day

Team

Ifra Saqlain Apologies as I have misunderstood the implementation explained above.  

This is the home page:

<section class="hero-unit search-box">
{{search}}
</section>

<section class="knowledge-base">
{{#if categories}}
<div class="category-tree">
{{#each categories}}
<section class="category">
{{#if ../has_multiple_categories}}
<h2><a href="{{url}}">{{name}}</a></h2>
{{/if}}
{{#each sections}}
<section class="section">
<h3>
{{#if internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}}
<a href="{{url}}">{{name}}</a>
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li {{#if promoted}} class="article-promoted" {{/if}}>
{{#if promoted}}
<span data-title="{{t 'promoted'}}">★</span>
{{/if}}
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
<i class="section-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/if}}
</section>
{{else}}
<i class="category-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/each}}

{{#if more_sections}}
<div>
<a href="{{url}}">{{t 'see_all_sections'}}</a>
</div>
{{/if}}
</section>
{{/each}}

{{pagination}}
</div>
{{/if}}
</section>

<section class="community">
{{#if help_center.community_enabled}}
<h4>
{{t 'community'}}
{{#link 'community'}}
{{t 'browse'}}
{{/link}}
</h4>
{{/if}}
{{recent_activity scope='community'}}
</section>

Hey Justin, unfortunately you provided the section page code in the above your comment so I fixed that code and shared with you anyway share your home_page.hbs template code then I'll add the icon's code and will share then you will need to copy and paste.

https://support.intego.com/hc/en-us it's home page of help centre so you need to add icons in the homepage code then that will work as you want.

367066863047 Thank you for the help.  I made the changes you suggested, but it did not have the intended outcome.  I am trying to have the icon display next to each of the Section titles here:

https://support.intego.com/hc/en-us

Ideally, it would appear here:
However, after making the changes it only appears inside of the specific section, and is quite large.

Is there a different code change I should be making for this?  Thanks again.

Hi Justin Fain, if you want to show the image before the section title, there would be change the position of icon/image. I have updated your code , you need to copy and paste, add the section IDs in the {{#is...}} condition and add the images which you have been upload in the assets folder of your theme.

<nav class="sub-nav">
  {{breadcrumbs}}
  {{search}}
</nav>

<header class="page-header">
  <h1> 
    
     // Add the section IDs and images
     {{#is section.id 201325388}} <img src="{{asset 'VirusBarrierX9.png'}}" /> {{/is}}
     {{#is section.id 11111111}} <img src="{{asset 'example-1.png'}}" /> {{/is}}
     {{#is section.id 222222}} <img src="{{asset 'example-2.png'}}" /> {{/is}}
     {{#is section.id 3333333}} <img src="{{asset 'example-3.png'}}" /> {{/is}}
    
    {{section.name}}

// Move the internal section code after the section title for the nice UI otherwise both icons at one position won't look good
{{#if section.internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}}

  </h1>
  <span>{{subscribe}}</span>
</header>

<p>{{section.description}}</p>

{{#if section.articles}}
<ul class="article-list">
  {{#each section.articles}}
  <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}" class="article-list-link">
     {{title}}
    </a>
  </li>
  {{/each}}
</ul>
{{else}}
<i class="section-empty">
  <a href="{{section.url}}">{{t 'empty'}}</a>
</i>
{{/if}}

{{pagination}}

If any query let me know :)

Team

I am also trying to add an image before the title of a section, but it is not working for me as I would expect.  I have uploaded the image asset and entered the line.  Any idea what I am doing wrong?

<nav class="sub-nav">
{{breadcrumbs}}
{{search}}
</nav>

<header class="page-header">
<h1>{{#if section.internal}}
<span class="visibility-internal" data-title="{{t 'internal'}}">
<span class="visibility-internal-icon"></span>
</span>
{{/if}} {{section.name}}</h1>
<span>{{subscribe}}</span>
</header>

<p>{{section.description}}</p>

{{#if section.articles}}
<ul class="article-list">
{{#each section.articles}}
<li {{#if promoted}} class="article-promoted" {{/if}}>
{{#if promoted}}
<span data-title="{{t 'promoted'}}">★</span>
{{/if}}
<a href="{{url}}" class="article-list-link">
{{#is id 201325388}} <img src="{{asset 'VirusBarrierX9.png'}}" /> 
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{else}}
<i class="section-empty">
<a href="{{section.url}}">{{t 'empty'}}</a>
</i>
{{/if}}

{{pagination}}

Go through this article for adding the font awesome icons:

Step 1. Add font awesome library in the document template.
Step 2. Add font awesome icon on any template where you need.

see how I add the library and icon on the template
https://support.zendesk.com/hc/en-us/community/posts/360033529353-Guide-customization-tip-Category-blocks-customization-with-icons-on-mouse-hover

And

If you have images then you can upload that in assets folder in you HC.

If you have svgs then simply add on any template.

How do you use the Font Awesome icons? you upload them in the assets?