Question

我有一个带有文字的标签链接＆＃34;建议＆＃34;但在移动设备中，我有一个CSS规则，可将其更改为如下图标：

a:before {
    font-family: "Linearicons";
    content: "\e697";
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
}

问题是在移动设备上还出现了文字＆＃34;建议＆＃34;我只想要图标。知道如何解决它？

Answer 1

您可以添加另一个以确保隐藏文字，

a {font-size: 0px;}    

a:before {
font-family: "Linearicons";
content: "\e697";
display: inline-block;
font-weight: normal;
font-style: normal;
font-size: 22px;
position: absolute;
top: 0;
left: 0;
}

Answer 2

这是一种方法：

对于移动样式，请在visibility: hidden;元素上设置a以隐藏文字，然后在生成的内容上设置visibility: visible;以显示图标。

a {
    visibility: hidden; /* hide the text */
    max-width: 0;
  }
a:before {
  ... /* some styling */
  visibility: visible; /* show the icon */
}

请注意，visibility属性与display属性不同，因为它允许隐藏父元素并显示子元素。

来自spec :(大胆的我的）

隐藏

生成的框是不可见的（完全透明，没有   绘制），但仍影响布局。此外，的后代   如果元素具有＆＃39; visibility: visible＆＃39;。
，则该元素将可见

演示代码段

＆＃13;

@media (max-width: 600px) { 
  a {
    visibility: hidden;
    max-width: 0;
  }
  a:before {
    font-family: "Linearicons";
    content: "\e697";
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible;
  }
}

＆＃13;

<a href="#">Suggestions</a>

＆＃13;

Codepen demo（调整大小以查看效果）

Answer 3

您可以在媒体查询中使用visibility属性来解决它

＆＃13;

a{
  position:relative;
  padding:4px 0px 0px 20px;
}
a:before {
        font: normal normal normal 14px/1 FontAwesome;
    content: "\f129";
    display: inline-block;
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 767px){
  a{
  visibility: hidden;
}
a:before {
    visibility: visible;
}
}

＆＃13;

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<a>Suggestions</a>

＆＃13;

从内容CSS之前删除文本

3 个答案:

Codepen demo（调整大小以查看效果）