在 Woocommerce 手持菜单中显示文本和图标答案

【问题标题】：Display text as well as icon in Woocommerce handheld menu在 Woocommerce 手持菜单中显示文本和图标
【发布时间】：2019-01-18 18:05:45
【问题描述】：

great documentation 介绍了如何更改或删除 WooCommerce 中可用的手持菜单链接。然而，我注意到许多移动设计（mweb 和应用程序）都倾向于显示文本以及手持菜单的图标。我想在图标下方显示链接的文本，以及图标本身。

看起来 WooCommerce 故意使用 CSS 隐藏了手持链接的文本：

.storefront-handheld-footer-bar ul li>a {
  height: 4.235801032em;
  display: block;
  position: relative;
  text-indent: -9999px;
  z-index: 999;
  border-right: 1px solid rgba(255, 255, 255, .2)
}

我怀疑我应该只更改text-indent，然后文本会重新显示。例如，在 WooCommerce 提供的向手持菜单添加新主页链接的说明中，我的想法是更改 CSS 中的 text-indent 将允许我同时显示图标和“主页”。

function jk_home_link() {
    echo '<a href="' . esc_url( home_url( '/' ) ) . '">' . __( 'Home' ) . '</a>';
}

但是，我不知道如何“撤消”文本缩进，以便链接的文本也显示出来。有什么想法吗？

【问题讨论】：

标签： wordpress woocommerce

【解决方案1】：

文本由于“text-indent: -9999px;”而被隐藏所以你可以如下改变它。

这里我额外添加了“line-height:”来排列文本的位置。

.storefront-handheld-footer-bar ul li > a {
  text-indent: 0px;
  line-height: 95px;
 }

如果需要调整图标的位置，可以添加以下css并修改值。

.storefront-handheld-footer-bar ul li>a::before {
  line-height: 2;
}

【讨论】：