Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1319035

    Hi, I want to add an icon to button in my menu, fontello font ‘ue824’ – lock symbol, like you see on this website: https://www.amnb.com/ (see thier blue button in menu with lock symbol).

    I’m stumped, I’ve gone all through the forum and it seems this question has been asked quite a lot and I’ve tried many things, but nothing seems to work.

    I would appreciate your help. thank you.

    #1319277

    Hey Eleina_Shinn,

    Thank you for the inquiry.

    In the Appearance > Menu editor, you can add a custom menu item and enable the Button Style option from the Menu Style settings. This should create a menu item that looks like button, but you will have to use additional css code to insert an icon.

    #menu-item-755 a:before {
        font-family: 'entypo-fontello';
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        color: white;
        content: "";
    }
    

    The css code above will apply the search icon to the menu item with the ID 755. You can also insert a widget in the header instead of a custom menu item.

    // https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

    Best regards,
    Ismael

    #1319368

    Okay, so I just tried your css code, see here: http://047f6450c0.nxcli.net/

    Few things:

    1) there is no space on left before the icon… I tried changing padding in Advanced Styling, but that did not help;
    2) it is dark on hover
    3) How do I make this the lock symbol, is it supposed to be an image url there? I tried the Enfold Fontello font code in content — ‘ue824’ – but that did not work.

    Thank you for your help.

    #1319549

    Thought I’d reach back out. Not sure if you got my last email. Need to find another solution as the icon overlaps the letters, needs space in between, and it goes away upon hover.. Would like the lock symbol icon to the left of the my “CUSTOMER LOGIN” Button in the Main Menu. Your Lock Symbol, fontello fonts, is ‘ue824’. Is there a way to do this or do I need to go another direction?

    Thank you!

    ~e

    #1319570

    Hi,

    Thank you for the update.

    Try to use the following css code instead of the previous one to replace the search icon with a lock, and to create more space around and within the button.

    #menu-item-18120 a:before {
        font-family: 'entypo-fontello';
        width: 10px;
        height: 10px;
        display: block;
        position: relative;
        color: white;
        content: "";
        float: left;
        left: 10px;
    }
    
    #menu-item-18120 a .avia-menu-text {
        padding-left: 30px !important;
    }

    Result after adding the css code: https://postimg.cc/MvDHfdzj

    Best regards,
    Ismael

    #1319682

    That looks awesome Ismael, thank you. The lock symbol disappears on hover, would there be a way to change that?

    Also, I just wondered if there was a simpler way to do this, or instructions so I could do it myself in the future? Or maybe customer headers are in the Enfold future updates (Like your Footer is, which would be incredible!)

    Thanks so much, ~e

    #1319791

    Hi,
    To correct the lock symbol from disappearing on hover please add z-index to your css like this:

    #menu-item-18120 a:before {
        font-family: 'entypo-fontello';
        width: 10px;
        height: 10px;
        display: block;
        position: relative;
        color: white;
        content: "";
        float: left;
        left: 10px;
        z-index: 1;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1319899

    Hi Mike,

    That worked great; thank you so much!

    #1319904

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Add an Icon to a Button Styled Menu Item’ is closed to new replies.