Home › Forums › WoodMart support forum › IMPORTANT SOLUTION FOR MENU OR BUTTON ICONS

IMPORTANT SOLUTION FOR MENU OR BUTTON ICONS

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • January 7, 2021 at 7:09 pm #256554

    maverick10
    Participant

    Dear Sirs,
    I am adding buttons to my top bar in the header, and I have seen that to add an icon, it only allows to enter font-awesome code … and today, those font-awesome fonts block the browser, until that the icons are loaded, and this is very important in addition to the speed and weight, because now the user experience also counts a lot.

    THEN MY QUESTION IS:
    How can I insert an icon in a button in the header and to the left of the text that is SVG or PNG?

    There must be some way or modification or add of some code or template.

    January 7, 2021 at 10:42 pm #256606

    Elise Noromit
    Member

    Hello,

    Please provide your site admin access to the private area I will check the settings

    Best Regards

    January 7, 2021 at 11:06 pm #256615

    maverick10
    Participant

    Ohh Elise, thank you very much,
    You are fantastic, you are the best, thank you!
    I give you the access

    Maybe there is a way to change all the icons on my site from font-awesome to SVG which is lighter and doesn’t block the browser.

    I also want to change your social icons from your woodmart-font to SVG, because the woodmart-font, it behaves like a font-awesome.

    I need to do a very strong optimization of my website because I am going to enter a WPO competition, and I want woodmart to be the winner.

    Sure there may be some way, because you are the best programmers in the whole world.

    January 8, 2021 at 4:00 pm #256831

    Elise Noromit
    Member

    Hello,

    I see one button in your header.

    Please provide the image URLs from your Media library as well as the screens which elements to customize, I will provide custom CSS.

    Best Regards

    January 9, 2021 at 2:53 am #256932

    maverick10
    Participant

    There are actually two buttons which are “UNETE” AND “MI CUENTA” in the top header and they both have font-awesome icons.

    If you want, you can use this url of a possible png icon, for the two buttons and I see how the icon would look on the buttons:
    https://tuwebtop.com/eunicegarciaruiz6/wp-content/uploads/2021/01/flecha-doble-volver-blanca.png

    Thank you very much dear Elise

    January 9, 2021 at 6:36 pm #257019

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    .whb-top-bar .wd-btn-icon i {
    margin: 0;
    color: transparent;
    background-image: url(https://tuwebtop.com/eunicegarciaruiz6/wp-content/uploads/2021/01/flecha-doble-volver-blanca.png);
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
}

    You need to add different classes to the buttons if you want different images for buttons, I will correct the CSS code then.

    Best Regards

    January 10, 2021 at 12:34 am #257056

    maverick10
    Participant

    Ohh Elise, thank you so much, you are fantastic! how beautiful it is.

    You are the best!, I would like to ask you a little question.
    I have seen that your theme includes the woodmart-font, which is the same as font-awesome.

    How could I disable it to include my own icons?
    Or, do you really think that woodmart-font is less harmful to the performance of a web page than font-awesome?

    This answer is very important to me.
    Thank you very much dear Elise

    January 10, 2021 at 5:53 pm #257148

    Elise Noromit
    Member

    Hello,

    The WoodMart icon font is almost equal to the Font-Awesome. I would recommend using Font-Awesome, our theme supports this font, it is SEO optimized and requires no integration or customization.

    You just need to enable “Always use” in the Theme Settings > Performance > CSS.

    Best Regards

    January 11, 2021 at 12:00 am #257194

    maverick10
    Participant

    Dear Elise, thank you very much … you are very good.
    But I think you did not understand my proposal.
    I am a professional wordpress optimizer, and with the new core vitals and improving the user experience, font-awesome should never be used because it blocks the browser when loading these fonts, and if woodmart is the same as font-awesome, then this is very negative as well.

    Did you know this?

    So since you have taught me how to place png files that are much faster to load that font-awesome and woodmart-font and without blocking the browser, I ask you:
    Where can I disable font-awesome and woodmart-font at the same time?

    I have perfmatters to deactivate CSS files separately when loading a page, but I can’t find how to deactivate woodmart-font CSS so that it does not load in any page

    Thank you very much dear Elise

    January 11, 2021 at 8:50 am #257278

    Artem Temos
    Keymaster

    Hello,

    Currently, there is no option to disable our theme’s font completely. But you can change the font-display property for our theme’s icons font to fix the performance block issue. Find the option in Theme Settings -> Performance -> CSS -> “font-display” for icon fonts

    Kind Regards

    January 13, 2021 at 4:26 am #257875

    maverick10
    Participant

    Dear Elise, thank you very much but in that option, there are 5 options for me to choose from, and I am very afraid of breaking my theme or causing a problem to my entire website.
    Which font-display option for icons is completely safe and also suitable to improve performance and get woodmart-font to never blocking the browser when loading?

    Thank you

    January 13, 2021 at 8:24 am #257928

    Artem Temos
    Keymaster

    Hello,

    To improve performance, you need to select the swap option. Read more information here https://css-tricks.com/google-fonts-and-font-display/

    Kind Regards

    January 15, 2021 at 12:20 am #258547

    maverick10
    Participant

    Dear friends, I am afraid to choose the swap option, because you indicate in this option of “font-display for icons that it is not recommended to use (I ATTACHED SCREEN CAPTURE)

    WHY IS IT NOT RECOMMENDED TO USE THIS FONT-DISPLAY FOR ICONS OPTION EVEN IF I CHOOSE SAWP?

    CAN SOMETHING DAMAGE MY WEB? THIS IS VITAL BECAUSE MY WEBSITE IS DYNAMIC AND IF SOMETHING DAMAGES MY WEBSITE I WILL SUICIDATE ME

    Attachments:
    You must be logged in to view attached files.
    January 15, 2021 at 7:01 am #258577

    Artem Temos
    Keymaster

    Hello,

    Personally, we don’t use this option since it may cause icons to small jump on initial page loading. But in general, it improves the performance according to Google docs. You can enable it and test how it works for you.

    Kind Regards

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)