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
Ifra Saqlain
Hey Carlo,
Please go through this article. There you can see the process for adding the icon before the title.
OR
If you want to add only for one article title then you need to check article ID and add icon like this.
See in the given image, line no. 38 :
If any issue let me know :)
Thank You
Team Diziana
0
Carlo Dalessandro
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
Ifra Saqlain
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:
You can copy the article IDs from your article URL on the browser :
Step 5: You can do like this, just need to change the article ID and images.
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
Carlo Dalessandro
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
Carlo Dalessandro
It was not the last question :)
And how I can add a link to the image? Can I make it?
0
Ifra Saqlain
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
Ifra Saqlain
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
Carlo Dalessandro
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
Ifra Saqlain
Hi :)
Add image in line no. 46, If you want to add an image before title then add image
OR
If you want to add an image after the article title then
0
Carlo Dalessandro
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
Ifra Saqlain
Okay, section page allows id not article.id
{{#is id 360038927174}} ...... {{/is}
Try this if any issue let me know.
0
Carlo Dalessandro
Thank you very much!
0
Ifra Saqlain
Enjoy :)
0
Jon Hambach
@... 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
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
0
Carlo Dalessandro
How do you use the Font Awesome icons? you upload them in the assets?
0
Ifra Saqlain
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
Justin Fain
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?
0
Ifra Saqlain
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.
If any query let me know :)
Team
0
Justin Fain
@... 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
However, after making the changes it only appears inside of the specific section, and is quite large.
Ideally, it would appear here:
Is there a different code change I should be making for this? Thanks again.
0
Ifra Saqlain
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
Justin Fain
@... Apologies as I have misunderstood the implementation explained above.
This is the home page:
0
Ifra Saqlain
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:
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:
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.
If any issue, let me know.
Have Good Day
Team
0