Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 30, 2021 at 11:25 pm #1319035
    Eleina_Shinn

    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.

    September 1, 2021 at 6:13 am #1319277
    Ismael

    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

    September 1, 2021 at 3:19 pm #1319368
    Eleina_Shinn

    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.

    September 2, 2021 at 9:38 pm #1319549
    Eleina_Shinn

    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

    September 3, 2021 at 4:38 am #1319570
    Ismael

    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

    September 3, 2021 at 7:32 pm #1319682
    Eleina_Shinn

    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

    September 5, 2021 at 7:13 pm #1319791
    Mike

    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

    September 6, 2021 at 7:54 pm #1319899
    Eleina_Shinn

    Hi Mike,

    That worked great; thank you so much!

    September 6, 2021 at 8:10 pm #1319904
    Mike

    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

  • Author
    Posts
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.