[Resolved] Getting Icons To Align With The First Line Of A Headline Block

[Jodie]

Hi, how can I ensure my icons are properly aligned with the first line of a headline block on GeneratePress? When I try to write content in a headline block that uses multiple lines, the icon aligns itself with the middle of the block, which I don’t want. Thanks for your help!

[David]

Hi there,

it would require CSS:

.floated-icon {
    display: block !important;
}
.floated-icon .gb-icon {
    float: left;
    position: relative;
    top: 5px;
}

And then add the floated-icon class to the headlines you want to apply it to.

[Jodie]

Hi David, thanks for that! Can I indent the entire content in the headline, so it matches up with the first line? I’ve attached a screenshot, so you can see what I mean.

[David]

If you just want the icon to be at the top instead of center.
Then select the headline block with the icon, and in the Layout options set the align content to flex start ( the top align icon )

[Jodie]

Hi David, that’s great, thank you. I just want the icon in line with the first line of text of the headline block. Is that possible? Thanks so much for your help!

[Fernando]

Hi Jodie,

Can you try setting the Headline Block’s display to inline?

Reference: https://docs.generateblocks.com/article/layout-options-overview/

[Jodie]

Hi Fernando, I tried that, but it doesn’t achieve the outcome I’d like it to. Any ideas on how to fix it? Thank you as always!

[Fernando]

Keep it inline, then give it a class of turn-inline

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then, add this CSS:

.gb-headline.turn-inline span{
    display: inline;
}

[Jodie]

Thanks very much Fernando

[Fernando]

You’re welcome, Jodie!

[Author]

Posts