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

Question

I would like to draw a slash line over a glyph icon or an icon from font-awesome. For example, I want to put slash over this icon as "no wifi available.

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

I tried to do it with stacking but for that I would need an one icon that is a slash.

<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

Is there an easier way to have a slash over the signal icon?

Answer 1

Font awesome uses the :before tag for icons, why not use the :after pseudo and .fa.fa-signal:after {content: "/"; color: red;} and position it with 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>