Return to previous page

How can I use elementor icons in the xstore theme options

This topic has 10 replies, 4 voices, and was last updated 7 months ago ago by Andrew Mitchell

  • Avatar: Awais Bhatti
    Awais Bhatti
    Participant
    August 14, 2024 at 18:43

    Hello

    Hope you are doing well.

    I want to use custom-icons/font-awesome-icons with Xstore custom theme options, but they are unavailable there. The icons are accessible in the Elementor editor though.

    I want to use the font-awesome or custom icons in the mobile panel and I am not able to do that.

    Another thing, how can I use the Elementor widgets in the Xstore custom theme options?

    Further, I have noticed another issue. When I make changes in Xstore custom theme options, they don’t show up on the front end, but when I make changes with Elementor they show up on the front end.

    How can I make sure that the changes I make in both Elementor and the Xstore custom theme options show up on the front end?

    Best Regards
    Awais

    Please, contact administrator
    for this information.
    #410263 Copied Theme version: 9.3.17
    9 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    August 15, 2024 at 06:37

    Hello, @Awais Bhatti,

    Thank you for contacting us and for using XStore.

    1/ Please read our theme documentation here: https://www.8theme.com/documentation/xstore/troubleshooting/xstore-icons/

    If you wish to add custom icons in the mobile panel, Please navigate to XStore > Theme Options > Mobile Panel > Edit section > You may upload a custom SVG icon or image and publish it.

    you can upload it by yourself, you can download the SVG icons from Google as per your requirements.

    Please click on the following link to view the image for reference: https://paste.pics/ROYOG

    2/ We would like to inform you that if you are utilizing custom layouts through the Elementor plugin, you may experience issues with the XStore > Theme Options not functioning or displaying correctly on the front end.

    Please be aware that the XStore > Theme Options are only fully operational with the default layouts.

    We trust this information will be of assistance to you.

    3/ We kindly request that you initiate a new topic for each distinct issue you encounter on our support forum. This approach ensures that your inquiries are addressed promptly and efficiently, avoiding any potential inconvenience.

    Thank you for your cooperation.

    Best Regards,
    The 8Theme Team

    #410279 Copied
    Avatar: Awais Bhatti
    Awais Bhatti
    Participant
    August 15, 2024 at 07:02

    Thank for your answer, but we can’t add hover effect on custom icons, right? or is there a way to do that as well?

    I have marked this resolved, but the below response didn’t work’s for the SVG Icon hover

    #410281 Copied
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    August 15, 2024 at 07:26

    Hello, @Awais Bhatti,

    Thank you for your response

    To achieve the desired customization, you may add the following CSS code. Please navigate to XStore > Theme Options > Theme Custom CSS > Global CSS and insert the code provided below:

    @media only screen and (max-width: 767px) {
    .et-mobile-panel .et_column > a .et_b-icon:hover {
        color: #007bff !important; /* Change icon color on hover */
        transform: scale(1.2) !important;  /* Scale up the icon on hover */
    } 
}

    This code is designed to change the icon color and scale on hover for devices with a screen width of 767px or less. On mobile devices hover does not work, you need to click on the icon to see the result.

    We trust this will assist you with your customization needs. Should you have any further questions or require additional assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    #410285 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 15, 2024 at 07:45

    Dear Awais Bhatti,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

    #410289 Copied
    Avatar: Awais Bhatti
    Awais Bhatti
    Participant
    August 15, 2024 at 10:24

    The code you have provided i have added to the custom CSS in theme options, it works but it only changes the color of Xstores icons, it doesn’t change the color of the SVG icons which I have uploaded as suggested by you.

    This issue is not limited to the mobile panel, I also want to add more more icons on desktop version as well and hover color change should work.

    please see screenshots, in screenshot 1 you can see that you code changes the color of category on hover, but in screenshot 2 you can see that I won’t have the color of the custom svg icon on hover, however it does add the transition effect on icons, but color is also important.

    so is there a way to use font-awesome icons that are accissible in elementor or can we need to change the color on hover.

    by the way can we edit mobile panel with elementor, I didn’t see this option.

    Files is visible for topic creator and
    support staff only.
    #410314 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    August 16, 2024 at 05:49

    Hi @Awais Bhatti,

    For the other icons, you can try with this custom CSS codes:

    
span.elementor-button-icon:hover  svg path {
    fill: #00796B;
}

    Let us know how it goes!

    #410412 Copied
    Avatar: Awais Bhatti
    Awais Bhatti
    Participant
    August 16, 2024 at 12:49

    Thanks, but when you insert svg with image tag then this doesn’t work

    #410457 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    August 17, 2024 at 10:43

    Dear Awais Bhatti,

    We regret to inform you that the custom CSS codes you are attempting to use will not function with SVG images.

    We recommend reviewing the following article for guidance on how to change the color of SVG images on hover: https://css-tricks.com/change-color-of-svg-on-hover/. We believe you will find it quite helpful.

    Should you require further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    #410529 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 26, 2024 at 00:16

    Dear Awais Bhatti,

    We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

    Click here to rate now: https://themeforest.net/downloads

    Thank you sincerely for your ongoing support!

    Best Regards,
    The 8Theme Team

    #411574 Copied

  • Tagged: , , , , , ,

  • Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘how can I use elementor icons in the xstore theme options’' has been successfully resolved, and the topic is now closed for further responses

Support Forum Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Minimal Fashion 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Flowers Store – WooCommerce Theme
lazy-placeholder
Man Store – WooCommerce Theme
lazy-placeholder
Home Decor 02 Store – WordPress WooCommerce Theme
lazy-placeholder
Pizza Store – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store 03 – WordPress WooCommerce Theme
lazy-placeholder
Digital Marketing – WordPress WooCommerce Theme
lazy-placeholder
Rental Car – WordPress WooCommerce Theme
lazy-placeholder
Spa – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.