这些图标似乎只是添加了一个CSS::before 选择器。

因此，如果您有类似的设置自定义选项卡：

function woocommerce_product_write_panel_tabs(){ ?>

    <li class="custom_tab">
        <a href="#custom_tab_data_mytab">
            <?php _e(\'My Custom Tab\', \'textdomain\'); ?>
        </a>
    </li>

<?php }

您应该能够设计a::before 用这样的方式：

#woocommerce-coupon-data ul.wc-tabs li.custom_tab a::before,
#woocommerce-product-data ul.wc-tabs li.custom_tab a::before,
.woocommerce ul.wc-tabs li.custom_tab a::before {
    font-family: Dashicons;
    content: "\\f111";
}

您可以看到，我们的目标是a 在我们的新列表元素中。我们可以针对a 因为我们在列表项中添加了一个唯一的类，<li class="custom_tab">.

在这里，您可以更改font-family 还有content, 因此，您可以添加自己的图标字体。只需使用浏览器中的开发人员工具检查样式。

例如，您可以将新样式直接添加到创建列表项的函数中：（tested）

function woocommerce_product_write_panel_tabs(){ ?>
    <style>
        #woocommerce-coupon-data ul.wc-tabs li.custom_tab a::before,
        #woocommerce-product-data ul.wc-tabs li.custom_tab a::before,
        .woocommerce ul.wc-tabs li.custom_tab a::before {
            font-family: Dashicons;
            content: "gg";
        }
    </style>

    <li class="custom_tab">
        <a href="#custom_tab_data_mytab">
            <?php _e(\'My Custom Tab\', \'textdomain\'); ?>
        </a>
    </li>
<?php }

现在您将看到的不是默认图标，而是“gg”。