در اکثرا قالب های وردپرس در بخش پست تایپ آیکون پونز در سمت راست آن دیده می شود که پیش فرض است و در این نوشته می خواهیم چگونه فونت آیکون های پیش فرض پست تایپ را تغییر و به جای آن فونت آیکون جدیدی قرار دهیم.

دو راه برای استفاده از فونت آیکون داریم:

۱. استفاده از فونت آیکون اختصاصی وردپرس (dashicons)

۲. استفاده از فونت آیکون Fontawesome

 

۱. استفاده از فونت آیکون وردپرس (dashicons) : در این بخش وردپرس تعدادی فونت آیکون اختصاصی دارد که در بخش مدیریت از آن استفاده می شود و تعداد آیکون های آن محدود است.

برای پیدا کردن آیکون های مورد نظر : پیوند Dashicons

کد زیر:

function wpdocs_create_post_type() {
    register_post_type( 'acme_product',
        array(
            'labels' => array(
                'name'          => __( 'Cytus', 'textdomain' ),
                'singular_name' => __( 'Cytus', 'textdomain' )
            ),
            'public'      => true,
            'has_archive' => true,
            'menu_icon'   => 'dashicons-products',
        )
    );
}
add_action( 'init', 'wpdocs_create_post_type', 0 );

در خط ‘menu_icon’ => ‘dashicons-products’, شما کافیه کلاس مورد نظر dashicons-cart با dashicons-products جایگزین کنید.

۲. استفاده از فونت آیکون Fontawesome : این وابستگی هزاران آیکون مختلف دارد که نیازهای برنامه نویسان را رفع می کند و همه جور آیکون هایی نیز پیدا می شود.

برای استفاده از فونت آیکون Fontawesome کد زیر را در فایل 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 );

function Cytus_admin() {
    wp_enqueue_style('all_min_css', get_template_directory_uri().'/css/all.min.css');
    wp_enqueue_script('all_min_js', get_template_directory_uri().'/js/all.min.js');
}
add_action('admin_init', 'Cytus_admin');

مثل گزینه شماره ۱ خط ‘menu_icon’ => ‘dashicons-products’, کلاس آن را تغییر دهید.

مثال : ‘menu_icon’ => ‘dashicons-fas fa-book’,

پیش نمایش زیر:

موفق باشید 🙂