Wie kann ich tolle Font-Icons in den Menü-Icon-Bereich der Custom Post Type UI einfügen?

Lesezeit: 3 Minuten

Ich möchte fantastische Symbole für Schriftarten in den Symbolbereich des benutzerdefinierten Beitragstyp-UI-Menüs einfügen, aber ich konnte es nicht hinzufügen. Wie kann ich eine Idee machen, Jungs? Danke schön.

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

wenn Sie diese Dateien in die functions.php und style.css einfügen können und die benutzerdefinierte Post-Typ-Klasse kennen, die sich die von WordPress angegebene Body-Klasse ansieht

Um Font Awesome für einen benutzerdefinierten WordPress-Beitragstyp zu verwenden, müssen Sie ein wenig CSS schreiben: Zielen Sie einfach auf einen CPT-Menüpunkt (überprüfen Sie die WordPress-Admin-Seitenleiste, um die richtige CSS-ID zu finden) wie folgt:

#adminmenu #menu-posts-custom_post_type_name .wp-menu-image:before {
 content: "\f135"; //find this by clicking on the individual icon on Font 
 Awesome's site.
font-family: 'FontAwesome' !important;
 font-size: 18px !important;
}

Als nächstes fügen Sie diese Stile dem WordPress-Admin hinzu, indem Sie den admin_head-Hook verwenden:

function namespaced_admin_styles_function() {

  echo '<link href="https://stackoverflow.com/link/to/admin-styles.css"  rel="stylesheet">';
}

add_action('admin_head', 'namespaced_admin_styles_function');

…und los geht’s! Nicht ganz. Sie müssen das Font Awesome-Stylesheet weiterhin sowohl im WordPress-Adminbereich als auch im Front-End Ihrer Website hinzufügen. Glücklicherweise können Sie auf diese Weise zwei Fliegen mit einer Klappe schlagen:

function FontAwesome_icons() {
echo '<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"  rel="stylesheet">';
}

add_action('admin_head', 'FontAwesome_icons');
add_action('wp_head', 'FontAwesome_icons');

Referenz von:https://cnpagecy.com/blog/3-ways-to-use-icon-fonts-in-your-wordpress-theme-admin/

Benutzeravatar von smarteist
schlau

Fügen Sie in Ihrem Post-Type-Array fontawsome-Klassen wie folgt hinzu:

array(
'menu_icon' => 'dashicons-fa fa-book', /* the icon for the custom post type menu. uses built-in dashicons (CSS class name) */
);

Fügen Sie dann diese Hooks in Ihrer functions.php hinzu

add_filter( 'sanitize_html_class', function ( $sanitized, $class, $fallback ) {

    if ( strpos( $class, 'fa' )
         || strpos( $class, 'fas' )
         || strpos( $class, 'fal' )
         || strpos( $class, 'fab' )
         || strpos( $class, 'far' )
    ) {
        $class = str_replace( 'dashicons-', '', $class );

        return $class;

    }

    return $sanitized;

}, 0, 3 );

und fügen Sie Font awsome in Ihrem Admin-Dokument hinzu:

function fontawesome_dashboard() {
    wp_enqueue_style('custom-style', get_template_directory_uri().'/assets/styles/all.min.css');
    wp_add_inline_style( 'custom-style', '.fa:before,.fas:before,.fal:before,.fab:before,.far:before{font-family:inherit!important;}' );

}
add_action('admin_init', 'fontawesome_dashboard');

Im Plug-in für benutzerdefinierte Beiträge können Sie keine großartigen Symbole für Schriftarten hinzufügen. Sie müssen den Dashicon-Klassennamen oder die Symbolbild-URL verwenden.

Ref. für dashicon klasse – https://developer.wordpress.org/resource/dashicons/

Sie können das Symbol von verschiedenen Websites herunterladen und verwenden. Ref. – http://www.flaticon.com/packs/font-awesome.

Ich hoffe, es ist nützlich für Sie.

du kannst herunterladen Font tolle Icons als PNG und laden Sie sie in WordPress hoch und schreiben Sie die vollständige URL http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png
wie oben…

Symbolgröße muss 20px sein…

oder Sie können verwenden Dashicon.it unterstützt automatisch Dashicons.

Überprüfen Sie dieses Bild http://dev.savivatechnologies.com/hpa/wp-content/uploads/2017/07/dashicon.png

Hoffe das hilft dir…

1442550cookie-checkWie kann ich tolle Font-Icons in den Menü-Icon-Bereich der Custom Post Type UI einfügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy