如何在店面手持页脚栏的字体真棒图标下添加文本

Question

我正在配置店面主题。店面的手持页脚栏显示移动设备上的链接。但是，现在，它只显示字体真棒图标（不包括文本）。在这种情况下，如何在字体真棒图标下包含文本？

我尝试编辑一些代码，但搜索栏在店面的手持页脚栏中显示为错误。

添加到函数中的 PHP 代码.php：

add_filter( 'storefront_handheld_footer_bar_links', 'jk_add_home_link' );
function jk_add_home_link( $links ) {
$new_links = array(
    'home' => array(
        'priority' => 10,
        'callback' => 'jk_home_link',
    ),
);
$links = array_merge( $new_links, $links );
return $links;
}
function jk_home_link() {
echo '<a href="' . esc_url( home_url( '/' ) ) . '">' . __( 'Home' ) . '</a>';
}

.CSS：

.storefront-handheld-footer-bar ul li.home > a:before {
content: "f015";
}

如果我使用上面的代码，则不会显示文本"主页"。如何在字体真棒图标下显示它？

Answer 1

你的代码很好，但文本被此属性延迟隐藏了：

.storefront-handheld-footer-bar ul li > a {
text-indent: -9999px;
}

使用缩进来定位它。没有尝试过。

Answer 2

我在 https://stackoverflow.com/a/68511882/11225860 上回答了同样的问题，从那里开始应对。

由于"文本缩进：-9999px;"，文本被隐藏，因此您可以按如下方式更改它。

在这里，我另外添加了"行高："来排列文本的位置。

.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;
}