【问题标题】:Replace menu item with icon (Prestashop theme)用图标替换菜单项(Prestashop 主题)
【发布时间】:2015-07-07 08:18:04
【问题描述】:

我想请教一下用图标替换文本的方法(主页图标作为第一个菜单子项)。

我的 css 和这个类似: http://livedemo00.template-help.com/prestashop_53577/

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

给出:

隐藏“服装”文本的最佳方法是什么?

【问题讨论】:

    标签: icons prestashop font-awesome menubar


    【解决方案1】:

    你只需要添加

    text-indent: -9999em
    

    to .sf-menu li:first-child,将文本缩进到视图 a 之外,然后

    text-indent: 0
    

    to .sf-menu li:first-child a:before,重置伪选择器的属性

    【讨论】:

    • 谢谢。您能否提供一些有价值的提示如何忽略文本宽度和悬停?我的意思是将图标保持在固定位置。那么我应该为每个@media 添加相同的 css 吗?
    • 您需要将width: auto;left: 0; 添加到.sf-menu li:first-child a:before。对于其他@media,这取决于您在视觉上想要什么。
    • 你是什么意思“当文本有更大的宽度”?您指的是 “服装” 吗?如果您输入width: auto,那应该不是问题。至于其他设备,只需将position: absolute; 放入 .sf-menu li:first-child a:before
    • 确实有几个字,有问题:将white-space: nowrap;添加到.sf-menu li:first-child a。那么悬停呢?我不明白你的问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-11-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多