Trying to add font-awesome to category page
AnsweredI'm trying every trick I can find to add FontAwsome before the section name, and create a div that would look like a button.
I added the header code, and then added the spans
However, it's not rendering into the test view. I tried the fa images on the home page and it worked fine. Is there a different way I should approach this with the category_page.hbs?
I don't mind not displaying the articles in each section, so I tried removing this part, but it didn't help.
Here's my code - any help much appreciated:
{{#each sections}}
<section>
{{#is name 'catA'}}
<span class="fas fa-search-dollar"> </span>
{{/is}}
{{#is name 'catB'}}
<span class="far fa-clock"> </span>
{{/is}}
{{#is name 'catC'}}
<span class="fas fa-hand-holding-usd"> </span>
{{/is}}
<h3 class="section-tree-title">
<a href="{{url}}">{{name}}</a><br>
</h3>
{{#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}}
-
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 @...!!
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}}
"> </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? -
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}}
"> </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
Please sign in to leave a comment.
3 Comments