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

Font awesome 使用 :before 标签作为图标，为什么不使用 :after pseudo 和 .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.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 3

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

对上面的 fa-ban 示例稍作修改。这使用分数 em 定位而不是像素。这样，无论当前字体大小如何，定位都有效。这也使用 class 而不是 id，以便它可以在同一页面上多次使用。我还把斜杠改成了全红。 tool-tip 还使用标题标签添加了弹出窗口。

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

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

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

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>

Answer 6

现在 Font Awesome 原生支持它。该功能称为 "stacked icons"。参见 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 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:polygon”，并使用 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>

使用 CSS 在 glyphicon 或 font-awesome 图标上画一条斜线

Draw a slash line over glyphicon or font-awesome icon using CSS

css

font-awesome

glyphicons