Trying to add font-awesome to category page

답변함

3 댓글

  • Ifra Saqlain
    Community Moderator

    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

    0
  • Ruthy Licht

    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:

    ```

    <div class="section-tree">
    {{#each sections}}
    <section class="section">
    <h2 class="section-tree-title">
    <a class="clean" href="{{url}}">
    <i class="fa
    {{#is name 'Help me save money'}} fas fa-search-dollar{{/is}}
    {{#is name 'Help me save time'}} far fa-clock {{/is}}
    {{#is name 'Help me with EVERYTHING'}} fas fa-hand-holding-usd {{/is}}

    {{#is name 'Our Training'}} fas fa-chalkboard-teacher {{/is}}
    {{#is name 'Inventory Items'}} fas fa-boxes {{/is}}
    {{#is name 'MarketMan for chains / HQ Functioncality'}} fas fa-store-alt {{/is}}


    ">&nbsp;</i>
    {{name}}
    </a>
    </h2>
    {{#if articles}}

    ```

    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?

    0
  • Ifra Saqlain
    Community Moderator

    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 

    0

댓글을 남기려면 로그인하세요.

Zendesk 제공