用图标替换菜单项（Prestashop主题） [英] Replace menu item with icon (Prestashop theme)

问题描述

我想问一下用图标替换文本的方法（主页图标作为第一个菜单子项）。

I'd like to ask you about the way to replace the text with icon (home icon as the first menu child).

我的css与此类似一：
http://livedemo00.template-help.com/prestashop_53577/

My css is similar to this one: http://livedemo00.template-help.com/prestashop_53577/

我在global.css的末尾添加了这段代码：

I've added this code at the end of the global.css:

.sf-menu li:first-child a:before{
  content: "\f015";
  font-family: "FontAwesome";
  display: inline-block;
  font-size: 33px;
  line-height: 70px;
  color: black;
}

.sf-menu li ul li a:before{
  content:none!important;
}

给出：

什么是最好的隐藏文字服装的方法？

What's the best way to hide the text "Clothing"?

推荐答案

你只需要添加

text-indent: -9999em

to。 sf-menu li：first-child，将文本缩进视图a然后

to .sf-menu li:first-child, to indent the text out of view a and then

text-indent: 0

到.sf-menu li：first-child a：before，重置伪选择器的属性

to .sf-menu li:first-child a:before, to reset the property for the pseudo selector

这篇关于用图标替换菜单项（Prestashop主题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！