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

Question

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

Answer 1

要自定义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; ?>

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

Answer 2

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

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

Answer 3

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

更改选项卡链接和图标 Unicode 的 -dashboard，如 f4fe

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