如何在店面的手持式页脚栏的字体图标下添加文字？

Question

我正在配置店面主题。Storefront的手持式页脚栏显示移动设备上的链接。然而，现在，它只显示Font Awesome图标(不包括文本)。在这种情况下如何在Font Awesome图标下包含文本？

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

添加到functions.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";
}

如果我使用上面的代码，文本“Home”将不会显示。如何在Font Awesome图标下显示？

Answer 1

你的代码很好，但是文本被这个属性解密隐藏了：

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

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

Answer 2

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

文本由于" 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;
}