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

[Halil]

Hi,
I’d like to add date icon to date labels that appear under post titles in both single posts and blog posts list.

Also I’d like to increase its font size a bit.

How can I achieve that?

[Ying]

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 🙂

[Halil]

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!

[Halil]

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

[Ying]

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.

[Halil]

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

[Ying]

You are welcome 🙂

[Author]

Posts