[Support request] How to add svg icon on right side of Headline?

[Yogesh]

Hello, thank you for creating this awesome theme. I am scratching my mind for a little obstacle in building my site.
Question is, I want to add an SVG icon with a Headline on the right side. But it seems there is only two option available when I am trying to add icon in Headline which is “inline” and “above”. How can I add an icon on the right side of a headline?

Secondly, I can easily add an SVG icon on the right side of a button. It is really weird. Is it difficult for you to add options to choose for adding SVG icon on the right or left side for a Headline? Please try to add this in the next update please.
thanks.

[Ying]

Hi there,

The icon in the headline block can only be added to the left side of the text.

However, you can add a custom class to the headline block, eg. switched-icon, then add this CSS to customizer > additional CSS:
https://www.screencast.com/t/zZZsd7FtKZ

.gb-headline.switched-icon {
    flex-direction: row-reverse;
}

[Yogesh]

Hello, thank you for your reply. I really appreciate your help. But will not custom CSS will load on all pages/post of website? Will not this add an extra code and create bloat to website and slow down speed. I will have to add code manually everytime where I want to switch icon place. Is it not better if you just add this feature in your theme. I think, just some line of code will be enough for this. Moreover it is just a basic features in other block editor based theme. So it really hurt when we look towards GP.:(

[Fernando]

Hi Yogesh,

The Headline Block is part of GenerateBlocks, not GeneratePress Premium.

You can download a plugin called Simple CSS which allows you to add CSS to specific pages: https://docs.generatepress.com/article/adding-css/#simple-css

Alternatively, you can also use a Hook Element to add CSS specific to pages. Just enclose the CSS in <style> tags.

We tend to add only features that many users deem necessary to keep our plugins lightweight and high performing in comparison to others.

You may raise feature requests here though: https://community.generateblocks.com/c/feature-requests/6

[Max]

Hi guys!
https://www.kleurintens.nl/verbouwen/isolatie/het-belang-van-goede-gevelisolatie/
I used the CSS code to get the icon at the right side. But now i have at the left side white space in H1.

i used this one
.gb-headline.switched-icon {
flex-direction: row-reverse;
}

[Fernando]

Hi Max,

Try adding this code instead of that:

.gb-headline.switched-icon .gb-icon {
    order: 1;
}

[Author]

Posts