How to add icons/symbols to article titles

Beantwortet

22 Kommentare

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    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
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    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

    It was not the last question :)

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    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
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

    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
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, section page allows id not article.id

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

    Try this if any issue let me know.

    0
  • Carlo

    Thank you very much!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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 

    {{#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

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

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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?

    <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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

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

    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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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:

    <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
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    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

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk