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

css, font-awesome, glyphicons

Solution

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>

Problem

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?

Original source