date label with an icon at the beginning in blog lists and post titles

Hi Halil,

You can try this CSS:

span.posted-on:before {
    content: "";
    display: inline-block;
    background-image: url('svg-link');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

span.posted-on {
    font-size: 20px;
}

Replace the svg-linkwith your image URL.

Let me know if you need further assistance :)

great help!

I tried to lift up text part of the date for a few px so that icon and text's center lines are aligned, tried margin-padding without success.

If you can help me with that too, I'm totaly done Ying!

and instead of img url can we use <svg xmlns= .... </svg> markup?

tried to lift up text part of the date for a few px so that icon and text’s center lines are aligned, tried margin-padding without success.

Try change this CSS :

span.posted-on {
    font-size: 20px;
}

to:

span.posted-on {
    font-size: 20px;
    display: flex;
    align-items: center;
}

and instead of img url can we use <svg xmlns= …. </svg> markup?

Not using this method, background image can only be used as URL.

If you want to use <SVG>without uploading the <SVG> to your server, you can give the block element - post meta template a try:
https://docs.generatepress.com/article/block-element-post-meta-template/

In this way you can use Headline block to add the <SVG> to the icon field.

that's great ! I need to play with these element things, looks powerful and flexible. huge thanks Ying.

You are welcome :)