Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #746524

    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

    #746832

    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

    #746860

    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?

    #747833

    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

    #747994

    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/

    #748023

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

    #748240

    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

    #748296

    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

    #748316

    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

    #748324

    the space where is yellow color or red circle

    Image and video hosting by TinyPic

    #750112

    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

    #750888

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

    Image and video hosting by TinyPic

    #751480

    Hi,

    you can adjust it with this code:

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

    Best regards,
    Andy

    #752421

    this code doesn’t work

    #753035

    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

    #753057

    now yes, thanks

    #753067

    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

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