[Resolved] FontAwesome for Categories & Tags on Index

Home Forums Support FontAwesome for Categories & Tags on Index

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #985327
    Sean

    Main Focus:
    I’m trying to have categories and tags display the font awesome icon prior to their data; just like how I have it setup on my article’s pages.

    Secondary Focus:
    I can’t seem to get the right font awesome calendar icon on my article pages, but I can get it to work on my index.. Weird?

    #985602
    Sean

    For reference, this is what css I currently tried

    View post on imgur.com

    #985629
    David
    Staff
    Customer Support

    Hi there,

    try targeting the <a> tag eg.

    .cat-links a:before {
        font-family: FontAwesome;
        content: "\f07c";
        padding-right: 5px;
    }

    How are you adding FontAwesome? Currently it doesn’t look like it is being loaded on your single posts?

    #985640
    Sean

    David that totally did it. Thank you!

    So I’ve always had trouble adding font awesome into areas, typically showing as blank. So I had to download a wordpress plugin. I would prefer not to have to use the plugin if possible though…

    #985643
    Sean

    I disabled that plugin. And now the fontawesome icons show as square blank boxes. THAT was the issue I had previously haha. No idea why.

    #985645
    David
    Staff
    Customer Support

    GP doesn’t load the FA icon font. This article provides some guidance:

    https://docs.generatepress.com/article/font-awesome/

    #985696
    Sean

    Re-enabled the same plugin mentioned in that link you sent. That’s what I was using before.

    This is the code I’m using in my element header for my blog article pages. For some reason it’s using the wrong fontawesome calendar though.

    View post on imgur.com

    #985732
    David
    Staff
    Customer Support

    What if you replace the FA shortcodes with their HTML eg. this is for the calendar:

    <i class="fa fa-calendar-o" aria-hidden="true"></i>

    You can find the FA Icon HTML here:

    https://fontawesome.com/v4.7.0/icon/calendar-o

    #985864
    Sean

    I was just trying that when you posted it haha. That seems to work better. Weird. Much appreciated David!

    #985875
    David
    Staff
    Customer Support

    Awesome – better performance over Shortcodes as well 🙂
    Glad to be of help.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.