logo标签列表

使用CSS在glyphicon或font-awesome图标上绘制斜线。

cssfont-awesomeglyphicons
24

我想在一个字形图标或来自font-awesome的图标上画一条斜线。 例如，我希望在这个图标上加上一条斜杠，表示"无wifi可用"。

<i class="fa fa-signal"></i>

我试着使用堆叠的方式完成它，但这需要一个斜线图标。

<div class="fa-stack fa-lg">
    <i class="fa fa-signal fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>                
</div>
Wi-Fi

有没有更简单的方法在信号图标上加上斜杠？

9个回答
27

Font awesome使用:before标签来插入图标，为什么不使用:after伪元素以及 .fa.fa-signal:after {content: "/"; color: red;} 并通过CSS定位呢。

.fa.fa-signal:after {
  position: absolute;
  content: "/";
  color: red;
  font-weight: 700;
  font-size: 1.7em;
  left: 7px;
  top: -10px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<i class="fa fa-signal fa-2x"></i>

请问，您能给一个例子吗？ - feradz
@feradz 我在我的回答中添加了一个示例，如果这是正确的，请点击答案旁边的复选标记。 - Aaron
谢谢 Aaron！太完美了！ - feradz
1
运行良好，谢谢。附加说明：不要忘记将父元素设置为“position: relative”。 - leszek.hanusz
23

我建议使用.fa-ban图标来覆盖Wi-Fi图标。
请参考下面的示例。

#container {
  position: relative
}

#nested {
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 200%;
  color: rgba(217, 83, 79, 0.7);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<h4>
  <i class="fa fa-rss" id="container">
    <i class="fa fa-ban" id="nested"></i>
  </i>
</h4>

.fa-ban 覆盖面太大了。当被它覆盖时，一些图标将变得不可辨认。 - Szczepan Hołyszewski
12

现在Font Awesome原生支持这个功能了，称为“堆叠图标”。请参见这里。

代码：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<span class="fa-stack fa-2x">
  <i class="fas fa-signal fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

".fa-ban覆盖的范围太大了；当被它覆盖时，大多数图标都会变得难以辨认。" - Szczepan Hołyszewski
10

另一种方法，我认为可以获得更好的视觉效果，是使用一个旋转的矩形：

.fa.fa-signal:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 141.421356%;
    top: -20.710678%;
    display: block;
    background: red;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<i class="fa fa-signal fa-2x"></i>

解释一些看起来可能有点神奇的数字：

  • width: 141.421356% - 计算父元素正方形的对角线长度（父元素边长 * 根号2）
  • top: -20.710678% - 将红线上移一点以使旋转后位置正确，这是超出宽度的一半
  • left: 50% 和 translate(-50%, 0) - 用于水平居中对齐
10
使用FontAwesome的堆叠和旋转功能，我喜欢使用管道符（|）来实现这种效果，因为样式规则很简单。 提示：您可以使用不同的字体来获得圆形的端点等效果。您也可以在没有包装标签的情况下实现相同的效果，但您需要添加自己的堆叠/定位规则。 放弃的图标截图 

.crossed-out:after{
        content: '|';
        color: red;
        display: block;
        font-weight: bold;
        text-align: center;
        font-size: 2.5em;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


<span class="fa-stack crossed-out">
    <i class="fa fa-lg fa-stack-1x fa-signal"></i>
</span>

2

我使用font-awesome斜杠图标（FA版本5.4.0+）解决了这个问题。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<span class="fa-stack fa-2x">
  <i class="fas fa-signal fa-stack-1x"></i>
  <i class="fas fa-slash fa-stack-1x" style="text-shadow: 0.1em 0.15em white;"></i>
</span>

使用 font awesome 倡导的方法是有意义的。有关该方法的更多信息可以在 font awesome 网站上找到-https://fontawesome.com/v4.7.0/examples/（这是旧版本，但方法仍然相同） - nmcilree
1
可能的替代方法是使用“clip-path: polygon”来为“：after”绝对对象进行设置，并调整left、top、width和height属性。 此外，工具栏大小与图标尺寸一致。 

.notavailable {
   position: relative;
}

.notavailable:after {
   content: " ";
   position: absolute;
   left: 8%;
   top: -6%;
   width: 88%;
   height: 110%;
   clip-path: polygon(0 0, 12% 0, 100% 100%, 88% 100%);
   background-color: rgba(150, 2, 2, 0.9);
}

i{ margin:15px; }
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<i class="fa fa-signal fa-1x notavailable"></i>
<i class="fa fa-signal fa-2x notavailable"></i>
<i class="fa fa-signal fa-4x notavailable"></i>

0
0
上面的fa-ban示例稍作修改。这里使用分数em定位而不是像素。这样，无论当前字体大小如何，定位都可以正常工作。这也使用类而不是id，因此它可以在同一页上多次使用。我还将斜杠改为全红色。还添加了一个工具提示弹出窗口，使用title标签。
.kc-fa-container { position:relative; }
.kc-fa-nested    { position: absolute;
left: -0.125em;
top: -0.125em;
font-size: 1.5em;
color: rgba(255, 0, 0, 0.7);
}
<i class="fa fa-rss kc-fa-contianer" title="No WiFi">
  <i class="fa fa-ban kc-fa-nested"></i>
</i>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接