Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Buttons with Icons in GenerateBlocks 2.0

  • Hi generators,

    a site I develop with GB2.0 has buttons with icons. It seems like for every button I put on the site, I’ll have to put the icon seperately? There are lot’s of subpages and maybe one day the client wants another icon – this would be hell.

    I tried to work with a class, ::after and content: url("data:image/svg+xml...) and put my encoded SVG there. But then it loses the ability to change color on hover wich is important.

    Is there a way to have a button class where the correct SVG is always attached inline?

  • Hi there,

    No, the icon is HTML, you can not use CSS to make HTML elements.

    Try saving the buttons as patterns, so you client can insert the buttons from the pattern selections.

  • This is sad. Because the patterns must be unsynched to change the URL and the button text. If we change the icon, it has to be changed in every instance. Another reason why GenerateBlocks needs 🌟components🌟 👀☺️ Thanks for your answer.

  • Because the patterns must be unsynched to change the URL and the button text.

    You can create the pattern as a non-synced pattern, right?

  • Right. And then I would have to change the SVG icon manually in every instance, not once globally.

  • Right. But you can create button patterns with different icons.

  • secondary button
    (with lots of different URLs and button texts, and some variations for dark background and sizes depending on context. Changing the icon color on hover.)

    Client: “We finally got around to make custom icons for our company. Could you exchange the chevron to our new icon?”

    Me: “😱😱😱”

    Do you see the challenge? What would be the best way to approach it? Having synched patterns for every possible button destination seems overkill. Having unsynched patterns leaves me with having to update 120+ button icons manually.

  • I understand the challenges. Unfortunately, we don’t have an effective solution to offer at this time.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.