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.

How can I change the hover color of an icon?

  • How can the hover color of a GB icon (that currently moves on hover) be changed without changing the color of the text?

  • Hi there,

    try this:

    1. in Customizer > Colors add a new color that will be used to set your Icon color.
    Give it name eg. icon-color-1 and set the color you want.

    2. edit the Headline and apply that color to the icon:

    3. Now add this CSS:

    
    .gb-headline:hover {
        --icon-color-1: #ff0000;
    }
    

    Set the hex color you want.
    What this will do is swap your icon-color-1 on hover.

  • Hey David,

    Your instructions seem to work for the set of icons that only become visible on hover, but not for those that were visible (with a different color) before the hover.

    I’ve tried changing the ‘normal’ color to none and (fully opaque) white, but nothing seems to work for that set. Can you take a closer look?

  • I’m not able to log in and see the elements using the user/pass you provided, can you check?

  • Please try again with updated password.

  • Still can not log in 🙁

  • New URL, username and password attached. Fingers crossed.

  • You have to assign a color for the icon to make the CSS to work, just like you did for the headlines in the footer, the icons was assigned to gold color, and the gold color changes to red on hover by the CSS.

  • Ying: Thanks, it works now.

    David: Sorry I misread your initial instructions.

  • Glad it worked 🙂

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