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

Question

我想在字形图标上绘制一条斜线,或者从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

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

Answer 1

字体真棒使用:before标签的图标,为什么不使用:在psuedo之后,.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>

Answer 2

我建议使用.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>

Answer 3

添加另一种方法来实现这种效果,我喜欢使用带有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>

Answer 4

另一种方法,我相信最好用更好的视觉效果是使用旋转的矩形:

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

现在这由 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>