Question

我想在字形图标或font-awesome图标上绘制斜线。例如，我想在此图标上添加斜线“没有无线网络。

<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

是否有更简单的方法在信号图标上设置斜杠？

Answer 1

Font awesome使用：before标签之前的图标，为什么不使用：在psuedo和.fa.fa-signal:after {content: "/"; color: red;}之后使用css定位它。

＆＃13;

.fa.fa-signal:after {
  position: absolute;
  content: "/";
  color: red;
  font-weight: 700;
  font-size: 1.7em;
  left: 7px;
  top: -10px;
}

＆＃13;

<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>

＆＃13;

Answer 2

我建议使用覆盖wi-fi图标的.fa-ban图标请看一个例子。

#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>

Answer 3

另一种方法，我认为最终会有更好的视觉效果，使用旋转的矩形：

.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) - 居中对齐

Answer 4

添加另一种方法来实现这种效果，我喜欢使用带有FontAwesome堆叠和旋转的管道（|），因为样式规则很简单。

提示：您可以为管道使用不同的字体来获得圆角等。您也可以在没有包装标签的情况下实现相同的效果，但是您必须添加自己的堆叠/定位规则。

Screenshot of crossed-out icon

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 5

现在，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>

Answer 6

略微修改上面的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>

Answer 7

我使用超棒的斜杠图标（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>

Answer 8

更新FontAwesome：v5.7.0

Jsfiddle

Answer 9

可能的替代方法是对“：after”绝对对象使用“ clip-path：多边形”，并使用left，top，width，height属性播放。条形尺寸也与图标尺寸一致。

q  = b // a

.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; }

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

9 个答案: