How to Show Icons before Date and Comments Post Meta

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/

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.

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.

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.

This is as easy as it can be.

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

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

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/

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?

Do you want the comments count after the author?

Let me know :)

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

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>';
    }
} );

Can you guide me on how to add this?

Adding PHP: https://docs.generatepress.com/article/adding-php/

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;
}