Menu
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?
567
Add Icons to HTML We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use.
To increase fa-border-all font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-border-all. Increase in icon size will be relative to their parent container.
Font Awesome is a font and icon toolkit based on CSS and Less. Glyphicons are icon fonts which you can use in your web projects.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
