Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 11, 2018 at 10:42 am #940386
    Monique

    Hi,

    Right now I am developing a new website which is not visible on the internet yet. I have a question about the icon used in the mega menu sub page. For reference see the image at http://de-starterwebsite.nl/mega-menu-icon.jpg.

    Currently the sub pages in the menu show a small arrow icon in front of each specific sub page. I would like to change that to an icon of a dog paw. I uploaded a few extra Fontello icons into theme options. The paw has number uf1b0.

    Can you please help me how to use this paw icon in front of the page name in stead of the arrow?

    Thanks & regards,
    Monique

    April 12, 2018 at 5:27 am #940774
    Vinay

    Hey Monique,

    Please change the icon Unicode to the paw icon and add this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    
#top .avia-bullet {
	border: none!important;
}
#top .avia-bullet:before {
    content: "\e813";
    font-family: 'entypo-fontello';
    color: #99cc99;
}

    Best regards,
    Vinay

    April 12, 2018 at 11:37 am #940861
    Monique

    Hey Vinay,

    Thanks for this. Unfortunately it doesn’t work yet. The menu on the site now shows the icon unicode (number) in stead of the icon (see http://de-starterwebsite.nl/mega-menu-icon2.jpg). I tried with other existing icons from your own library, but also then the unicode is shown in stead of the icon itself.

    Please advise.

    Best regards,
    Monique

    April 12, 2018 at 12:41 pm #940903
    Vinay

    Hi,

    Please try the below code and you should be able to see a tick mark. Then you can change the unicode :)

    /* Mega menu arrows */

#top .avia-bullet {
	border: none!important;
	background:red!important;
    padding:0;
    margin: 0 10px 0 0!important;    
}
#top .avia-bullet:before {
    content: "\e812";
    font-family: 'entypo-fontello';    
    font-size:11px;
    line-height:1em;
    position:absolute;
    top:10px;
    left:-3px;
}

    If you still have an issue we will need to inspect the site please get back to us when your site will be available to inspect.

    Best regards,
    Vinay

    July 5, 2018 at 6:03 pm #981679
    Monique

    Hi Vinay,

    It took a while… I tried what you advised. All goes well until I change the unicode “\e812”. Then there is no icon, only the text I inserted instead of your unicode. It needs to be a paw, and the unicode is uf1b0.

    Please find below login details and let me know if you ca help me.

    Thanks & regards,
    Monique

    July 7, 2018 at 11:47 am #982411
    Victoria

    Hi Monique,

    Did you upload the font for the icon? It’s from font awesome.

    Best regards,
    Victoria

    July 10, 2018 at 2:40 pm #983698
    Monique

    Hi Victoria,

    The icon is from Fontello. I downloaded the icon together with a few other icons and uploaded the zip file through Enfold Child Theme options Import/Export. You can have a look in wp admin if you wish (see login details here above).

    Please advise.

    Thanks & regards,
    Monique

    July 11, 2018 at 4:31 am #983993
    Mike

    Hi,
    Please try changing the lower css rule to this:

    #top .avia-bullet:before {
    content: "\f1b0" !important; 
    font-family: 'fontello' !important; 
    font-size:11px;
    line-height:1em;
    position:absolute;
    top:10px;
    left:-3px;
}

    Best regards,
    Mike

    July 18, 2018 at 9:03 am #986840
    Monique

    Hi Mike,

    Yes, that works! :-)

    Thanks for your help & can you please flag this topic as solved?

    Have a nice day,
    Monique

    July 18, 2018 at 12:18 pm #986917
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change icon for mega menu sub page’ is closed to new replies.