Question

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

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

已将Php代码添加到functions.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

您的代码很好，但是此属性取消隐藏了文本：

hidden

尝试缩进以定位它。没有尝试过。

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

如何在Storefront掌上页脚栏的Font Awesome图标下添加文本？

2 个答案: