Wordpress - ändern Foundation Menü-Symbol für benutzerdefinierte

Question

Ich benutze zurb foundation 6 und in ihm ist title bar Ich möchte die menu-icon ändern, für das Bild, das ich habe. Ich bin nicht sicher, wie dies zu tun ist und wie Assets aus dem benutzerdefinierten Thema in wordpress abgerufen werden können.

Da dies nicht funktioniert:

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

Ich habe mit dieser versucht, aber das ist nicht so gut funktioniert:

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

Nicht sicher, wie kann ich ziehe die Vermögenswerte in die css für benutzerdefinierte themen in wordpress und ändern die dasb menü icon für meine eigenen?

Answer 1

.menu-icon Hintergrundbild wird in menu-icon::after verwaltet, als Mischung aus Hintergrundfarbe und Box-Schatten. Wenn Sie also Ihr eigenes Bild hinzufügen möchten, müssen Sie es zu menu-icon::after hinzufügen und Code anpassen, um Ihr Bild so zu gestalten, wie Sie es möchten. Beispiel (kein vollkommenes, aber Ihnen zu zeigen, was ich meine):

.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; 
}