CODEWITHSUNDEEP
cssfont-awesomeglyphicons
feradz
feradz

Reputation: 1373

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

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?

Upvotes: 26

Views: 26326

Answers (9)

Aaron
Aaron

Reputation: 10450

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>

Upvotes: 27

Simone S.
Simone S.

Reputation: 1916

Possible alternative is use "clip-path: polygon" for ":after" absolute object and play with left,top,width,height attributes. Also bar size is consistent to icon dimension.

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

Upvotes: 1

ru4ert
ru4ert

Reputation: 1179

Update FontAwesome: v5.7.0

Jsfiddle

Upvotes: 0

judian
judian

Reputation: 450

I solved it using font-awesome slash icon (FA Version 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>

Upvotes: 2

davidthegrey
davidthegrey

Reputation: 1483

Now this is supported natively by Font Awesome. The feature is called "stacked icons". See here.

Code:

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

Upvotes: 12

mmarlow
mmarlow

Reputation: 264

Adding yet another method to achieve this effect, I like using the pipe (|) with FontAwesome stacking and rotation because the style rules are simple.

Tip: you could use a different font for the pipe to get rounded ends etc. You can also achieve the same effect without a wrapping tag but you'd have to add your own stacking/positioning rules.

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>

Upvotes: 10

Dan
Dan

Reputation: 1

A slight modification to the fa-ban example above. This uses fractional em positioning instead of pixels. This way the positioning works no matter what the current font size is. This also uses a class instead of an id so that it can be used multiple times on the same page. I also changed the slash to be full red. A tool-tip popup was also added using the title tag.

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

Upvotes: 0

Shimon S
Shimon S

Reputation: 4196

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>

Upvotes: 24

Luizgrs
Luizgrs

Reputation: 4873

Another approach, which I believe ends up with a better visual is use a rotated rectangle:

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

Explaining some number which might look magic:

  • width: 141.421356% - calculates the diagonal of the parent square (parent_square_size * square_root(2))
  • top: -20.710678% - moves red line a bit above the top to get it right positioned when rotated, this is half of the exceeding width
  • left: 50% and translate(-50%, 0) - to center align it

Upvotes: 10

Related Questions