在 Woocommerce 手持菜单中显示文本和图标 [英] Display text as well as icon in Woocommerce handheld menu

问题描述

有很棒的文档 关于如何更改或删除 WooCommerce 中可用的手持设备菜单链接.但是，我注意到许多移动设计(mweb 和应用程序)都倾向于显示文本以及手持菜单的图标.我想在图标下方显示链接的文本以及图标本身.

There is great documentation on how to change or remove the handheld menu links in WooCommerce available. However, I have noticed that many mobile designs (mweb and apps) are trending towards showing text as well as icons for handheld menus. I want to display the text for the link UNDERNEATH the icon, as well as the icon itself.

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

It looks like WooCommerce has intentionally hidden the text for the handheld link using 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 将允许我同时显示图标和主页".

My suspicion is that I should just change the text-indent and the text will show back up. For example, in the instructions provided by WooCommerce to add a new home link to the handheld menu, my thought was that changing text-indent in the CSS would allow me to display both the icon and 'Home'.

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

但是，我不太清楚如何撤消"文本缩进，以便链接的文本也显示出来.有什么想法吗?

But, I can't quite figure out how to "undo" the text-indent so that the text for the link shows as well. Any thoughts?

推荐答案

由于text-indent: -9999px;"，文本被隐藏所以你可以改变它如下.

The text is hidden due to "text-indent: -9999px;" so you can change it as follows.

这里我额外添加了line-height:"；排列文本的位置.

Here I am additionally added "line-height:" to arrange position of the text.

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

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

If you need to adjust position of the icons, you can add following css and make changes on the value.

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

这篇关于在 Woocommerce 手持菜单中显示文本和图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！