How to add icons/symbols to article titles

16 Comments

  • Ifra Saqlain
    Comment actions Permalink

    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
  • Carlo
    Comment actions Permalink

    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
    Comment actions Permalink

    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
  • Carlo
    Comment actions Permalink

    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
    Comment actions Permalink

    It was not the last question :)

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

    0
  • Ifra Saqlain
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
  • Carlo
    Comment actions Permalink

    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
    Comment actions Permalink

    Okay, section page allows id not article.id

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

    Try this if any issue let me know.

    0
  • Carlo
    Comment actions Permalink

    Thank you very much!

    0
  • Ifra Saqlain
    Comment actions Permalink

    Enjoy :)

    0
  • Jon Hambach
    Comment actions Permalink

    Ifra Saqlain 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
  • Carlo
    Comment actions Permalink

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

    0
  • Ifra Saqlain
    Comment actions Permalink

    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

Please sign in to leave a comment.

Powered by Zendesk