[Resolved] FontAwesome for Categories & Tags on Index

Home Forums Support [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

    https://i.imgur.com/A69MQyl.jpg

    #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.

    https://imgur.com/a/78kmiND

    #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.