如何在我的帐户页面的 woocommerce 选项卡上添加图标？

Question

我正在尝试在 Woocommerce 我的帐户页面的选项卡导航中添加一些图标。
像这样： https://woocommerce.files.wordpress.com/2016/04/storefront-2-my-account.png?w=1224 我尝试了一些教程，但没有运气。使用 Divi 主题形成优雅的主题。有人有解决方案吗？

Answer 1

WooCommerce“我的帐户”页面上的选项卡导航图标已通过 CSS 伪元素添加。

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--YOUR-PAGE a::before

Answer 2

您可以使用下面的代码作为更改帐户图标的示例。

更改选项卡的仪表板 link 和图标 Unicode，如 f4fe

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "\f4fe";
}

Answer 3

要将自定义 HTML 添加到选项卡标题，您可以从图标创建一个数组并在 woocommerce 中更改 nvaigation.php模板文件夹 如下所示：

$icons = [
    'dashboard' => '<i class="icon-dashboard"></i>',
    'orders' => '<i class="icon-orders"></i>',
    'edit-account' => '<i class="icon-edit-account"></i>',
    'customer-logout' => '<i class="icon-customer-logout"></i>',
    'downloads' => '<i class="icon-downloads"></i>',
    'edit-address' => '<i class="icon-edit-address"></i>'
];

并且在渲染选项卡的 foreach 中回显 $endpoint，如下所示：

<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
  <a class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>" href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>">
    <?php echo $icons[$endpoint] ?>
    <?php echo esc_html( $label ); ?>
  </a>
<?php endforeach; ?>

使用此方法，您可以将任何内容添加到您的选项卡

如何在我的帐户页面的 woocommerce 选项卡上添加图标？

How do i add icons on the woocommerce tabs in the my account page?

wordpress

woocommerce

divi-theme