Humble Squid - Add Icons on top of category names

10 Comments

  • Wes Drury

    @Shahriar - I use font awesome icons but you will need to play around with the CSS to get everything lined up or do some custom boxes.  This should get you started.

    Add font awesome CDN into your Document Head.

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

    Your HTML code will look something similar to this.  Insert your Category Name.

    {{#each categories}}
    <li><a href="{{url}}">{{name}}
    <i class="fa
    {{#is name 'Category1'}}fa-pencil{{/is}}
    {{#is name 'Category2'}}fa-cog{{/is}}
    fa-3x"></i>
    </a></li>
    {{/each}}

    Hope this helps.

    0
  • Nathan Hills

    Thanks Wes, this is so close to what I need. 

    Is there a way to use a class with a background SVG instead of Font Awesome? This way I can incorporate my custom icons. 

     

    0
  • Wes Drury

    @Nathan - Yes you can use SVG images.  I'll send you the code via email.

    0
  • Zachary Enz

    I'm running into this error when I have added this code. Do I put the categories in a different location?

    0
  • Wes Drury

    @Zachary - Line 4 - 11 should go on your homepage.  According to your screenshot your on the DocumentHead page.

    Also your document head line 2 should be this.

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

    Thanks Wes for the advice! Appreciate it. 

     

    I'm running into an issue with only images showing up in 2 of the boxes. The first one won't display anything. Is there a way to send you an email to possibly give you a view of the code, I can't seem to add an image in this chat now. 

    0
  • Zachary Enz

    I actually figured this out, there was something wrong with the identifier. 

    After I retyped it in, it worked. Thanks again for your help. 

    0
  • Wes Drury

    Glad to hear.  Best of luck.

    0
  • Candmf

    I get my icons after the text on the same line, is there any way that I could get them over the text? 

     

    0
  • Wes Drury

    @Candmf - If you are not using the Copenhagen Theme, I highly recommend that you use it.  For icons on the Copenhagen theme please see this article.

    0

Please sign in to leave a comment.

Powered by Zendesk