Recent searches


No recent searches

How to add icons/symbols to article titles

Answered


Posted Mar 26, 2020

Hi, is there a way to add icons or symbols to the titles of the article? as example, we'd like to show the symbol of a camera for the articles for which we offer a video tutorial.

Thanks!
Carlo


0

22

22 comments

image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Carlo,

Please go through this article. There you can see the process for adding the icon before the title.

https://support.zendesk.com/hc/en-us/community/posts/360039284014-Icon-before-article-title

 

OR

 

If you want to add only for one article title then you need to check article ID and add icon like this. 

{{#is article.id 360038927171}} <i class="fa fa-camera"></i> {{/is}}

 

See in the given image, line no. 38 :

 

 

If any issue let me know :)

 

Thank You

Team Diziana

0


Hi Ifra,

thanks!

I need to have a different icon for different articles (I'd like to add a camera icon for articles where we also provide a video tutorial), so the process to follow is the second one.

Something is not clear to me yet:

- do I still need to upload the image in the assets? I think so.

- I added that line of code to the article HTML, but cannot see any change. I guess that part of the code should be the name of the image, am I right?

- how to add the image at the end of the title instead of the beginning?

I'm sorry for my stupid questions, but I'm not a developer :)

Carlo

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey,

 

Okay, you can do like the second one. You need to upload assets when you are using images.

Step 1: Upload images in the assets.

Step 2: Add the given code on your article page.

Step 3: Change the article IDs means which is your article ID. You remove this given IDs and add your article IDs.

Step 4: If you have four video article then you need to check article ID four times like:

{{#is article.id 360038927171}} <img src="{{asset 'loader.gif'}}" /> {{/is}}
{{#is article.id 360038927172}} <img src="{{asset 'loader.gif'}}" /> {{/is}}
{{#is article.id 360038927173}} <img src="{{asset 'loader.gif'}}" /> {{/is}}
{{#is article.id 360038927174}} <img src="{{asset 'loader.gif'}}" /> {{/is}}

You can copy the article IDs from your article URL on the browser :

https://moderatorifras.zendesk.com/hc/en-us/articles/360041522451-How-to-add-icons-symbols-to-article-title

360041522451 --- article ID

 

Step 5: You can do like this, just need to change the article ID and images.

{{#is article.id 360038927171}} <i class="fa fa-camera"></i> {{/is}}
{{#is article.id 360038927171}} <img src="{{asset 'loader.gif'}}" /> {{/is}}

{{#is article.id 360038927171}} // here is your article ID
<i class="fa fa-camera"></i> // if you use font awesome icon
<img src="{{asset 'loader.gif'}}" /> // image name if you upload image in assets

 

For end of the title so need to change the position of image like this.

See line no. 38

 

Feel free to ask any query :)

 

Thank You

Team Diziana

0


I did it! thanks :)

One last question: how can I do the same things for the titles of the articles that appear in a section? with the method previously described I add an image to the title of the article, I want it to be visible in the list of the articles.

0


It was not the last question :)

And how I can add a link to the image? Can I make it?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

For section page you need to do same. Copy the same code and paste that after {{title}} which is inside the {{#if article}} code on section page.

Thank You
Team Diziana

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Depends on the requirement. If you only add link in the image then simply wrap the image inside the anchor tag.

If any confusion feel free to ask :)

Thank You
Team Diziana

0


Sorry to be a pain, I see this code for the section, which is the right line to have the image just beside the article title?

 

 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi :)

 

Add image in line no. 46,  If you want to add an image before title then add image 

<a href="{{url}}"> <img > {{title}} </a>

 

OR

 

If you want to add an image after the article title then

<a href="{{url}}">  {{title}} <img > </a>

 

 

0


Ok, did it and it works, but it appears on all titles. I tried to add the article.id, but it says I cannot have article ids in the section page...

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Okay, section page allows id not article.id

{{#is id 360038927174}} ...... {{/is}

Try this if any issue let me know.

0


Thank you very much!

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Enjoy :)

0


@... First off, just wanted to thank you for your help, I've read several of your how-to guides already.

How do I add Font Awesome icons in front of the title when viewing the sections? I followed the steps you listed above but I'm a little lost.

I want 

{{#is id 360002870273}} <i class="fab fa-android"></i>

To show the Android icon under the section page next to the article seen in the image below. Thanks in advance!

Below is the code from section_page.hbs

{{#if section.articles}}
<ul class="article-list">
{{#each section.articles}}
<li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
{{#if promoted}}
<span data-title="{{t 'promoted'}}" class="icon-star"></span>
{{/if}}
<a href="{{url}}" class="article-list-link">
{{#is id 360002870273}} <i class="fab fa-android"></i>
{{/is}}
{{title}}
</a>
{{#if internal}}
<span class="icon-lock" title="{{t 'internal'}}"></span>
{{/if}}
</li>
{{/each}}
</ul>
{{else}}
<i class="section-empty">
<a href="{{section.url}}">{{t 'empty'}}</a>
</i>
{{/if}}

0


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

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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.

0


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}}

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

 

 

 

0


@... 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.

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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.

0


@... 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>

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

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

 

 

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post