woocommerce 中移动视图上的手风琴标签标题图标

Question

我需要在移动视图上为每个产品标签标题放置不同的图标。我在标签的桌面视图上做了。我不能使用与桌面视图相同的方式，因为它在错误的位置在桌面视图上显示图标。图标在其位置正确显示的唯一方法是在标签中。我放了

<i class="fas fa-list-ul">

在移动视图上的标签内，但显然它会针对每个标签平铺图标重复。所以我需要一些动态代码或循环来为每个标签标题设置不同的图标。这是我的代码：

$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
$tabs_layout = woodmart_get_opt( 'product_tabs_layout' ); // accordion tabs
$scroll        = ( $tabs_layout == 'accordion' );
$tab_count     = 0;
$content_count = 0;
if ( ! empty( $product_tabs ) ) : ?>

// PRODUCT TABS FOR DESKTOP VIEW 
<div class="woocommerce-tabs wc-tabs-wrapper tabs-layout-<?php echo esc_attr( 
$tabs_layout ); ?>">
    <ul class="tabs wc-tabs">
    <?php $count=0 ?>
        <?php foreach ( $product_tabs as $key => $product_tab ) : ?>
        
            <li class="<?php echo esc_attr( $key ); ?>_tab ">
            
            <?php $count++; 
if ($count == 1 )
{
    echo '<i class="fas fa-edit"></i>';
    }
else if ($count == 2 )
{
    echo '<i class="fas fa-list-ul"></i>';
    }
else if ($count == 3 )
{
    echo '<i class="far fa-comment-alt"></i>';
    }       
    ?>
                <a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo 
apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( 
$product_tab['title'] ), $key ); ?></a>
            </li>
        <?php endforeach; ?>
    </ul>

     // PRODUCT TABS ACCORDION FOR MOBILE VIEW
    <?php foreach ( $product_tabs as $key => $product_tab ) : ?>
        <div class="woodmart-tab-wrapper">
<a href="#tab-<?php echo esc_attr( $key ); ?>" class="woodmart- 
accordion-title tab-title-<?php echo esc_attr( $key ); ?> <?php echo 
$content_count === 0 ? 'active' : ''; ?>"><i class="fas fa-list-ul"> 
</i>&nbsp;&nbsp;<?php echo apply_filters( 'woocommerce_product_' . $key . 
'_tab_title', esc_html( $product_tab['title'] ), $key ); ?></a>
            <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php 
echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo 
esc_attr( $key ); ?>">
                <div class="wc-tab-inner 
                <?php
                if ( $scroll ) {
                    echo 'woodmart-scroll';}
                ?>
                ">
                    <div class="<?php echo true == $scroll ? 'woodmart- 
 scroll-content' : ''; ?>">
                        <?php call_user_func( $product_tab['callback'], $key, 
 $product_tab ); ?>
                    </div>
                </div>
            </div>
        </div>
        <?php $content_count++; ?>
    <?php endforeach; ?>
    <?php do_action( 'woocommerce_product_after_tabs' ); ?>
</div>
<?php endif; ?>

Answer 1

我想您可以通过关联数组对制表键的图标映射进行硬编码。

$iconsMap = [
  3601 => 'fa-list-ul',
  3604 => 'fa-id-card',
];

然后

<?php
     if (array_key_exists($key, $iconsMap)) {
       ?>
          <i class="fas <?php echo $iconsMap[$key]?>"></i>
       <?php
     }
   ?>