Button shape

Dear Madam, Sir,

I’m contacting you regarding the button shape.
Indeed, I currently use the Gutenberg page builder and in my main header, I added the gift button element and added some CSS code, but I can’t get the shape to be circular and the hover background color to be the same as the wishlist and compare icons. I added this CSS code.

.gift-button.btn-size-extra-small{
height: 42px;
width: 42px;
background-color: rgba(180, 255, 255, 1);
padding: 0;
}

.gift-button.btn-size-extra-small:hover{
background-color: rgba(255, 51, 0, 1)
}

.gift-button.btn-size-extra-small span{
width: 36px;
height: 36px;
border-radius: 50%;
line-height: 36px;
background-color: rgba(180, 255, 255, 1);
display: block;
}

I’m sending you the screenshot and thank you for your answer.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I can further check on your site and give you a possible solution?

Best Regards,

Hello,

Thank you for your reply.

Ok, I’ll send them to you.

Next, I have another question. Can I use Font Awesome icons with the Gutenberg page builder for the Main Menu?

If so, how?

Best regards,

Hello,

01. Please copy and paste the below given CSS code to Theme Settings > Custom CSS > Global CSS.

.btn-icon-pos-left  {
    --btn-height: 42px !important;
    --btn-padding: 0 !important;
    --btn-brd-radius: 50% !important;   /* circular */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;  /* ensure width is same as height */
}

02. Please follow this guide and upload icon in menu.
https://xtemos.com/docs-topic/create-mega-menu/

Best Regards,

Hello,

Thank you for your answer and support.

The issue with the circular shape has been resolved, but this code doesn’t include a hover background color. When you hover over buttons like “Wishlist,” “Compare,” and others, they have a hover background color. Could you please add a hover background color to the “Gift” button? I’m sending you a screenshot.

Regarding my second question about Font Awesome icons, I read the link you sent me and added HTML icon code to the main menu and categories fields. Unfortunately, I didn’t get the desired result. Could you please resolve this issue as well? Or do I need to add the Font Awesome PHP code to the child theme for it to work?

Thank you for your answer.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your username and password of the site in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

[Author]

Posts