标签: dashicons

我使用以下方法在 WooCommere 中创建了一个自定义产品数据选项卡：

function my_custom_panel(){ ?>
  <div class='panel woocommerce_options_panel'>
    <?php
    woocommerce_wp_text_input(array(
      'id'          => '_my_custom_data',
      'label'       => __('Product Support', 'woocommerce'),
    ));

    ?>
  </div>
<?php }

add_action('woocommerce_product_data_panels', 'my_custom_panel');

现在我正在尝试更改管理屏幕上的图标/破折号：

我尝试更改模板html-product-data-panel.php，但在模板中找不到 dashicon 的相关代码：

<ul class="product_data_tabs wc-tabs">
  <?php foreach (self::get_product_data_tabs() as $key => $tab) : ?>
    <li class="<?php echo esc_attr($key); ?>_options <?php echo esc_attr($key); ?>_tab <?php echo esc_attr(isset($tab['class']) ? implode(' ', (array) $tab['class']) : ''); ?>">
      <a href="#<?php echo esc_attr($tab['target']); ?>"><span><?php echo esc_html($tab['label']); ?></span></a>
    </li>
  <?php endforeach; ?>
  <?php do_action('woocommerce_product_write_panel_tabs'); ?>
</ul> …

我正在使用内置于 wordpress的dashicons。

每当我在文本前面或后面使用图标时，它们都会不对齐。我将如何制作它，以便图标与文本对齐？

我可以更改 HTML 以使其成为一个单独的元素，但优先使用“before”选择器仅查找 css 解决方案。

a:link {
    text-decoration: none;
}

.fullscreen:before {
    font-family: "dashicons";
    content: "\f211 ";
    font-size:20px;
}

<a class="fullscreen" href="#">FULL SCREEN</a>

提琴手