CODEWITHSUNDEEP
wordpress
atomant
atomant

Reputation: 49

How can I add font awesome icons into Custom Post Type UI Menu Icon area?

I want to add font awesome icons into Custom Post Type UI Menu Icon area but I couldn't add. How can I do any idea, guys? Thank you.

enter image description here

enter image description here

Upvotes: 4

Views: 4378

Answers (4)

smarteist
smarteist

Reputation: 1421

in your post type array add fontawsome classes like so :

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

Then add these hooks in your functions.php

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 );

and add font awsome in your admin document:

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');

Upvotes: 1

sagar
sagar

Reputation: 590

if you can paste these files into the functions.php and style.css and know the custom post type class looking at the body class given by wordpress

To use Font Awesome for a WordPress Custom Post Type, you’ll need to write a little CSS: just target a CPT menu item (inspect the WordPress admin sidebar to find the correct CSS ID) like this:

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

Next, add those styles to the WordPress admin by using the admin_head hook:

function namespaced_admin_styles_function() {

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

add_action('admin_head', 'namespaced_admin_styles_function');

…and you’re off and running! Well, not quite. You still need to add the Font Awesome stylesheet to both the WordPress admin and the front-end of your site. Fortunately, you can kill two birds with one stone this way:

function FontAwesome_icons() {
echo '<link href="//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');

Refrence from:https://cnpagency.com/blog/3-ways-to-use-icon-fonts-in-your-wordpress-theme-admin/

Upvotes: 2

chidambara selvan
chidambara selvan

Reputation: 141

you can download font awesome icons as png and upload in wordpress and write full url http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png like above...

icon size must be 20px...

or you can use dashicon.it automatically supports dashicons.

chck this image http://dev.savivatechnologies.com/hpa/wp-content/uploads/2017/07/dashicon.png

Hopes this will help you...

Upvotes: 0

Ajay Tank
Ajay Tank

Reputation: 1

In Custom Post type plugin, You can not add font awesome icons. You must be use dashicon class name or icon image url.

Ref. for dashicon class - https://developer.wordpress.org/resource/dashicons/

you can download icon from different different website and use it. Ref. - http://www.flaticon.com/packs/font-awesome.

I hope it's usefull to you.

Upvotes: 0

Related Questions