Trying to add font-awesome to category page

Hey,

You can add FontAwesome icons before section name like this on category_page.hbs.

I did it on the default Copenhagen theme with the default category_page.hbs code  without removing the article's code.

See the given code -

 {{#each sections}}
          <section class="section">
            <h2 class="section-tree-title">
              <a href="{{url}}"> 
                <i class="fa
                {{#is name 'FAQ'}} fa-question-circle {{/is}}
                {{#is name 'Announcements'}} fas fa-bullhorn {{/is}} 
                "></i>
                {{name}}
               </a>
            </h2>
            {{#if articles}}
              <ul class="article-list">
                {{#each 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">{{title}}</a>
                    {{#if internal}}
                      <span class="icon-lock" title="{{t 'internal'}}"></span>
                    {{/if}}
                  </li>
                {{/each}}
              </ul>
              {{#if more_articles}}
                <a href="{{url}}" class="see-all-articles">
                  {{t 'show_all_articles' count=article_count}}
                </a>
              {{/if}}
            {{/if}}
          </section>
        {{else}}
          <i class="category-empty">
            <a href="{{category.url}}">{{t 'empty'}}</a>
          </i>
        {{/each}}

And you also need to add this FontAwesome library .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

You can add span with right type like this:

  <span class="icons">
    <i class="fa
      {{#is name 'FAQ'}} fa-question-circle {{/is}}
      {{#is name 'Announcements'}} fas fa-bullhorn {{/is}} 
    "></i>
</span>

Please let me know if this isn't helpful for you or any issue.

Thank You

Team Diziana

Thank you so much @Ifra Saqlain!!

This worked and now all of my categories besides one look awesome!

I have the weirdest issue:

The icons work on all category pages, but not on a specific one.

Here's the code I'm using:

The first three are not working  -they're all in one category.

I've checked my category page 100 times to make sure there's not specific ruling for this category view but there's nothing and I can't seem to find another reason for those not to show the icons - it's all part of the free package so shouldn't be a fa issue :(
Any idea what this could be?

Hey Ruthy,

You need to add the one more library of Font-Awesome, see line no. 3 in the given image.

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

And edit the code, See in the given image:

 <span class="icons">
       <i class="
      {{#is name 'FAQ'}} fas fa-search-dollar {{/is}}
      {{#is name 'Announcements'}} far fa-clock {{/is}} 
      "> &nbsp;</i>
 </span>

Result:

Also, Read this document of Font-Awesome 5 because Font-Awesome 5 used for Zendesk icons.

https://www.w3schools.com/icons/fontawesome5_intro.asp

Let me know if any issue :)

Team Diziana