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

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

Home Forums Support How to add svg icon on right side of Headline?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #2352977

    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.

    Customer Support

    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:

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

    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.:(

    Customer Support

    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


    Hi guys!
    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;

    Customer Support

    Hi Max,

    Try adding this code instead of that:

    .gb-headline.switched-icon .gb-icon {
        order: 1;
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.