Eindeutige Symbole neben jedem WordPress-Menüelement

Ich habe WordPress-Menüs, die irgendwie im Backend zusammengestellt sind. Ich habe wp_nav_menu () verwendet , um den Zeilenumbruch der Menüelemente etwas anzupassen.

Mein Problem ist, dass ich keinen direkten Zugriff auf die Menüelemente gefunden habe und ihnen ein benutzerdefiniertes Feld hinzufüge. Sie sind alle Kategorien und ich möchte ein bestimmtes Symbol für jede Kategorie.

Dies ist mein Code in der functions.php um das Menü anzupassen:

function custom_novice_menu($args) { $args['container'] = false; $args['container_id'] = 'my_primary_menu'; $args['link_before'] = '

'; $args['link_after'] = '

'; return $args; }

Kennt jemand eine Möglichkeit, jedem Menüelement ein eindeutiges Symbol hinzuzufügen?

Solutions Collecting From Web of "Eindeutige Symbole neben jedem WordPress-Menüelement"

Sie können dies wahrscheinlich mit einer Symbolschrift wie FontAwesome und CSS in der style.css-Datei Ihres Themas tun (hoffentlich mit einem untergeordneten Thema). Jeder Menüeintrag ist in der Regel ein Listenelement im HTML-Code, und normalerweise haben sie jeweils eine eindeutige class und / oder ID, so dass Sie diese verwenden können, um auf jeden zu zielen. Fügen Sie den ::before Selektor hinzu, um Ihr Symbol vor dem Listenelement einzufügen, etwa so:

 li.class::before { font-family: FontAwesome; color: #43CC9E; content: "\f06c"; /* escaped unicode for the icon */ float: left; width: 1.6em; /* icon width + space */ } 

Hier ist ein CodePen, den ich gemacht habe, wo Sie mit HTML & CSS mit FontAwesome spielen können, um Icons vor Listenelementen auf diese Weise zu platzieren.

Dieser Artikel erklärt dir, wie man FontAwesome in deine WordPress-Seite bringt und viele weitere Informationen darüber, wie man es benutzt. Es gibt natürlich andere Symbolschriften, und die Prinzipien sind die gleichen.

Auf der FontAwesome.io- Website können Sie jedes Symbol sehen und erhalten den Unicode für jedes.

Fügen Sie diesen Code in Ihrem Themenordner zu Ihrer functionsdatei hinzu:

 function menu_icon_stylesheet() { wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' ); wp_enqueue_style( 'fontawesome'); } add_action( 'wp_enqueue_scripts', 'menu_icon_stylesheet' ); 

Jetzt können Sie jedem Ihrer Menüpunkte eine class hinzufügen. Klicken Sie auf den Abwärtspfeil, um weitere Optionen zu diesem Menüelement anzuzeigen. Geben Sie im Feld “CSS-classn” Folgendes ein:

Mögen:

 fa fa-lg fa-home 

Hier

 "fa" is used for all items with a Font Awesome icon "fa-lg" sets the size of the icon to large "fa-home" relates to the specific icon you want to display. 

Fügen Sie diesen Style-Code schließlich in Ihr Stylesheet ein:

 /* styling for menu icons */ .navigation-class ul li { width: 100%; } .fa::before { float: left; margin-top: 8px; width: 30px; } .navigation-class ul li.fa.fa-lg a { font-family: 'Noto Serif', serif; font-size: 0.8em; } 

Jetzt ist Ihr Navigationsmenü mit Symbolen versehen!

Hoffe es wird dir helfen