Draw a slash line over glyphicon or font-awesome icon using CSS
I suggest to use .fa-ban
icon that will cover the wi-fi icon.
Please see an example.
#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>
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>