我想在字形图标或 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
有没有更简单的方法在信号图标上加上斜线？
【问题讨论】：
标签： css font-awesome glyphicons
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>【讨论】：
可能的替代方法是使用“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>【讨论】：
更新 FontAwesome：v5.7.0
【讨论】：
我使用 font-awesome slash icon (FA Version 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 原生支持此功能。该功能称为“堆叠图标”。见here。
代码：
<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>【讨论】：
添加另一种方法来实现此效果，我喜欢使用带有 FontAwesome 堆叠和旋转的管道 (|)，因为样式规则很简单。
提示：您可以为管道使用不同的字体来获得圆形末端等。您也可以在没有环绕标签的情况下实现相同的效果，但您必须添加自己的堆叠/定位规则。
Screenshot of crossed-out icon
.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>【讨论】：
对上面的 fa-ban 示例稍作修改。这使用分数 em 定位而不是像素。这样，无论当前字体大小如何，定位都有效。这也使用了一个类而不是一个 id，以便它可以在同一页面上多次使用。我还将斜线更改为全红色。还使用标题标签添加了一个工具提示弹出窗口。
.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>
【讨论】：
我建议使用 .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.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% - 计算父正方形的对角线 (parent_square_size * square_root(2))top: -20.710678% - 将红线移到顶部上方一点，使其在旋转时正确定位，这是超出宽度的一半left: 50% 和 translate(-50%, 0) - 居中对齐【讨论】：