Zeichne einen Schrägstrich über glyphicon oder font-awesome icon mit CSS

Question

Ich möchte eine Schrägstriche über ein Glyphe-Symbol oder ein Symbol von font-awesome zeichnen. Zum Beispiel möchte ich verfügbar Slash über dieses Symbol als „kein wifi setzen.

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

ich es mit Stapeln zu tun versucht, aber dafür würde ich ein ein Symbol benötigen, die ein Schrägstrich ist.

<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 

gibt es einen einfacheren Weg, um einen Schrägstrich über das Signalsymbol haben

Answer 1

Font genial verwenden das: vor Tag für Symbole verwenden, warum nicht. nach psuedo und .fa.fa-signal:after {content: "/"; color: red;} und positionieren sie es mit 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>

Answer 2

Ein weiterer Ansatz, die ich glaube, endet mit einem besseren visuellen ist ein gedrehtes Rechteck verwenden:

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

gewisse Anzahl Erklären, welche Magie aussehen könnte:

• width: 141.421356% - berechnet die Diagonale des Stamm square (parent_square_size * square_root (2))
• top: -20.710678% - bewegt sich ein wenig oberhalb der oberen roten Linie es richtig, wenn sie gedreht positioniert werden, das ist die Hälfte des Überschreitens Breite
• left: 50% und translate(-50%, 0) - zum Zentrum es
ausrichten

Answer 3

ich schlage vor, .fa-ban Symbol zu verwenden, die das wi-fi-Symbol decken.
Bitte sehen Sie ein Beispiel.

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

Answer 4

Eine leichte Modifikation des Beispiels fa-ban oben. Dies verwendet eine fraktionierte em-Positionierung anstelle von Pixeln. Auf diese Weise funktioniert die Positionierung unabhängig von der aktuellen Schriftgröße. Dies verwendet auch eine Klasse anstelle einer ID, so dass es mehrfach auf derselben Seite verwendet werden kann. Ich änderte auch den Schrägstrich, um vollständig rot zu sein. Ein Tool-Tipp-Popup wurde ebenfalls mit dem Titel-Tag hinzugefügt.

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

Answer 5

Hinzufügen noch eine andere Methode, um diesen Effekt zu erzielen, Ich mag das Rohr mit (|) mit FontAwesome Stapeln und Rotation, weil die Stilregeln sind einfach.

Tipp: Sie könnten eine andere Schriftart für die Pipe verwenden, um abgerundete Enden usw. zu erhalten. Sie können den gleichen Effekt auch ohne Umbruch erreichen, aber Sie müssen Ihre eigenen Stapel-/Positionierungsregeln hinzufügen.

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>