Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • February 13, 2017 at 5:22 pm #746524
    Pas7o

    hi, i must add icons to my menu.

    first question: it’s possible add fontello’s icons?

    second thing: the icons must change color when i click on
    i used this code for my menu color:

    .header_color .main_menu ul:first-child > li > a {
color: #ffffff;
} /* color of main menu items */
.header_color .main_menu ul:first-child > li a:hover {
color: #778899;
} /* hover state of main menu items */
.header_color .main_menu ul:first-child > li.current-menu-item > a, 
.header_color .main_menu ul:first-child > li.current_page_item > a {
color: #002fa7;
} /* color of active menu item */

    thanks

    February 14, 2017 at 12:00 pm #746832
    Vinay

    Hey Pas7o,

    To add custom icons to the main menu please check the below info :

    1. Go to http://fontello.com/ select the icons you like to add.
    IMPORTANT: Give the icon set a custom name can be anything like “yalp” this options is right next to the download button.

    2. Go to customize code tab to get the icon unicodes.

    3. The below code the nth-child(x) is the menu item number and content:”\EXXX” is the icon unicode.

    #avia-menu  > li:nth-child(1) > a .avia-menu-text:before {
	content:'\E897';
}

    Repeat this block of code for each menu item by changing x to menu item numbers in the nth-child(x)

    4. Add this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    /* Adjust distance between menu items */
#avia-menu  > li {
padding:0 10px 0 5px;
}
/* Icon font family */
#avia-menu  > li > a .avia-menu-text:before {
font-family: 'entypo-fontello';
position: absolute;
left: 0;
}
/* Icons */
#avia-menu  > li:nth-child(1) > a .avia-menu-text:before {
	content:'\E800';
}
#avia-menu  > li:nth-child(2) > a .avia-menu-text:before {
	content:'\E832';
}
#avia-menu  > li:nth-child(3) > a .avia-menu-text:before {
	content:'\E897';
}

    Best regards,
    Vinay

    February 14, 2017 at 12:46 pm #746860
    Pas7o

    when i upload the fontello’s icons i have this error:

    “couldn’t add the font because the server didn’t respond. please reload the page, then try again”

    why?

    February 16, 2017 at 8:36 am #747833
    Vinay

    Hey!

    Thank you for getting back to us. At the moment there seem to be an issue with the icon import and I have informed the dev’s.
    It’s required to only add Icons that are not available in the theme already. Please try the above code and it should work.

    To get the icon unicode please select the icons on fontello.com which are already in the theme and check the customize tab to get the unicode which you can then enter it in the css code.

    Let us know if you need any help, we are happy to help :)

    Regards,
    Vinay

    February 16, 2017 at 3:32 pm #747994
    Pas7o

    this is the result:

    Image and video hosting by TinyPic

    the icons are above the small borders.

    this is my web page:
    http://www.626bardolino.com/

    February 16, 2017 at 4:29 pm #748023
    Pas7o

    how i know the code of icons installed into the theme?

    February 17, 2017 at 7:11 am #748240
    Vinay

    Hi!

    That looks almost perfect! Please remove the separators between the menu items from Enfold > Header > Header Layout > Separator between menu items > No Separators

    To know which icons are already in the theme open a new blank page add an icon element and click on it to view all the icons. To know the unicode of the icon you can compare it on the fontello or entypo site.

    Hope this helps :)

    Best regards,
    Vinay

    February 17, 2017 at 9:42 am #748296
    Pas7o

    i change the code:

    #avia-menu  > li > a .avia-menu-text:before {
font-family: 'entypo-fontello';
position: relative;
padding-right: 3px;
left: 0;

    now i have the icons near the text and inside the border:
    Image and video hosting by TinyPic

    a question: why there is so much space between the white background and the border? it’possible reduce it?

    thanks

    February 17, 2017 at 10:45 am #748316
    Vinay

    Hey!

    Glad you were able to modify the code and make it work better for you. Please specify which space are you exactly referring to so we can help you better.

    Cheers!
    Vinay

    February 17, 2017 at 11:00 am #748324
    Pas7o

    the space where is yellow color or red circle

    Image and video hosting by TinyPic

    February 21, 2017 at 7:11 pm #750112
    Andy

    Hi,

    sorry, but no idea what you want to achieve. Can you be more specific please? and please use imgur.com or dropbox instead, then we can see your screenshots in a bigger size.

    Best regards,
    Andy

    February 23, 2017 at 11:13 am #750888
    Pas7o

    i’m talking about the margin between the menu pages:

    Image and video hosting by TinyPic

    February 24, 2017 at 4:28 pm #751480
    Andy

    Hi,

    you can adjust it with this code:

    #avia-menu  > li {
padding: 16px 25px 14px 13px;
}

    Best regards,
    Andy

    February 27, 2017 at 6:33 pm #752421
    Pas7o

    this code doesn’t work

    February 28, 2017 at 4:39 pm #753035
    Andy

    Hi,

    it should work, try to add an !important:

    #avia-menu  > li {
padding: 16px 25px 14px 13px !important;
}

    and play with different padding values.

    Best regards,
    Andy

    February 28, 2017 at 5:08 pm #753057
    Pas7o

    now yes, thanks

    February 28, 2017 at 5:31 pm #753067
    Andy

    Hi,

    -Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Andy

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘add icons to enfold principal menu’ is closed to new replies.