Wordpress - changing foundation menu icon for custom one

Question

I am using zurb foundation 6 and in it's title bar I would like to change the menu-icon , for the image that I have. I am not sure how to do this, and how to get assets from the custom theme in wordpress .

Since, this wasn't working:

.menu-icon {
  background: url('/assets/images/menu-icon.svg');
}

I have tried with this, but that is not working as well:

.menu-icon {
  background: get_template_directory_uri('/assets/images/menu-icon.svg');
}

Not sure, how can I pull the assets in the css for custom themes in wordpress and changing the zurb menu icon for my own?

Answer 1

.menu-icon background image is managed in menu-icon::after , as mix of background color and box-shadows. So if you want to add your own image, you have to add it to menu-icon::after and adjust code to make your image the way you want it. Example (not a perfect one, but to show you what I mean):

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-image: url(https://foundation.zurb.com/sites/docs/assets/img/logos/zurb-logo.svg);
    background-size: 150%;
    background-position: 7px 11px;
    background-repeat: no-repeat;
}