[Support request] How to Show Icons before Date and Comments Post Meta

Home Forums Support [Support request] How to Show Icons before Date and Comments Post Meta

Home Forums Support How to Show Icons before Date and Comments Post Meta

Viewing 15 posts - 1 through 15 (of 56 total)
  • Author
    Posts
  • #946824
    Ravi Dixit

    How to show Icons before date and comment post meta as shown in this post https://postimg.cc/4YnkBTdY

    And also before Primary Menus.

    #947109
    Leo
    Staff
    Customer Support

    Hi there,

    You would use the :before method like this:

    .posted-on:before {
        content: "icon";
    }
    .comments-link:before {
        content: "icon";
    }
    .main-navigation .main-nav ul li a:before {
        content: "icon";
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #962222
    Ravi Dixit

    Hello, Leo!

    The CSS you have given is not working.

    What do I need to add for icon…
    1. <i class=”fas fa-clock”></i>
    2. fas fa-clock
    3. Upload and add it’s links

    I have tried all 3 ways but still, none of any is working.

    And I don’t want to add an icon before all menus of primary navigation instead I need to add before some specific.

    #962300
    Leo
    Staff
    Customer Support

    Can you try this first?

    .posted-on:before {
        font-family: 'Font Awesome\ 5 Free';
        content: "\f274";
        color: #333;
        padding-right: 5px;
    }

    Reference: https://stackoverflow.com/questions/17254339/font-awesome-unicode

    You will need to make sure FA5 is installed as well.

    #963622
    Ravi Dixit

    I am not able to apply this, can you please make it a bit easy?

    I want to show icon before Updated date and Comments and also some before specific menus.

    #963635
    Leo
    Staff
    Customer Support

    This is as easy as it can be.

    I’m not seeing my CSS added above in your site?

    #964359
    Ravi Dixit

    I have added your CSS and it’s working also, Thanks for this.

    There is something I want to change:
    1. Icons are black and white, can I add colorful icons?
    2. There is not space between icon and date(https://prnt.sc/oik1z4), Updated text and icon(https://prnt.sc/oik27i).
    3. Icons are not showing for WP Show posts. here you can see: https://prnt.sc/oik2fn

    And share the CSS for Comments and navigation menus, for some specific instead for all menus.

    Please help with these small issues…

    Thanks

    #964523
    Leo
    Staff
    Customer Support

    1 & 2. Edited the CSS above:
    https://generatepress.com/forums/topic/how-to-show-icons-before-date-and-comments-post-meta/#post-962300

    3. Can you guide me to a page that’s using WP Show Posts?

    As for menu items, the icons can go directly into the menu label:
    https://docs.generatepress.com/article/adding-icons-to-menu-items/

    #964550
    Ravi Dixit

    1 & 2: working good, thanks
    3: Here is the link of my blog section: https://www.staymeonline.com/wp-admin

    And I can’t see any option to show comments count on Single Post, How can I do that?

    #964610
    Tom
    Lead Developer
    Lead Developer

    Do you want the comments count after the author?

    Let me know 🙂

    #964632
    Ravi Dixit

    Yes, But it would be better if you I can show that after the Updated date?

    #965214
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    add_filter( 'generate_post_date_output', function( $output ) {
        echo $output;
    
        if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
            echo '<span class="comments-link">';
                comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
            echo '</span>';
        }
    } );
    #965263
    Ravi Dixit

    Can you guide me on how to add this?

    #965381
    Leo
    Staff
    Customer Support
    #965526
    Ravi Dixit

    But the icon for comments is still not working:

    I am using this CSS:

    .comments-link:before {
        font-family: 'Font Awesome\ 5 Free';
        content: "\f274";
        color: #333;
        padding-right: 5px;
    }
Viewing 15 posts - 1 through 15 (of 56 total)
  • You must be logged in to reply to this topic.