Zeichnen Sie einen Schrägstrich Linie über glyphicon oder font-awesome-icon mit CSS

Ich würde gerne zeichnen, mit einem Schrägstrich Linie über eine Glyphe icon oder ein icon aus dem font-awesome.
Zum Beispiel, ich möchte Schrägstrich über das Symbol "kein wifi.

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

Habe ich versucht, es zu tun mit stapeln, aber dafür bräuchte ich ein Symbol ist ein Schrägstrich.

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

InformationsquelleAutor feradz | 2015-02-25
  1. 16

    Font awesome verwendet :vor-tag für icons, warum nicht die :nach psuedo und .fa.fa-signal:after {content: "/"; color: red;} und positionieren mit css.

    CSS:

    .fa.fa-signal:after {
  position: absolute;
  content: "/";
  color: red;
  font-weight: 700;
  font-size: 1.7em;
  left: 7px;
  top: -10px;
}

    HTML:

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

    • Bitte, können Sie uns ein Beispiel geben.
    • Ich habe ein Beispiel auf meine Antwort, könnten Sie auf das Häkchen neben der Antwort, ob das stimmt.
    • Dank Aaron! Perfekt!
    • Funktioniert gut, vielen Dank. zusätzlicher Hinweis: vergessen Sie nicht das übergeordnete element mit 'position: relative'
    InformationsquelleAutor Aaron
  2. 14

    Schlage ich .fa-ban Symbol, dass die Deckung der wi-fi-Symbol.

    Bitte ein Beispiel sehen.

    CSS:

    #container {
  position: relative
}

#nested {
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 200%;
  color: rgba(217, 83, 79, 0.7);
}

    HTML:

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

    InformationsquelleAutor s976
  3. 7

    Anderen Ansatz, ich glaube, Sie endet mit einer besseren visuellen ist, verwenden Sie ein gedrehtes Rechteck:

    CSS:

    .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);
}

    HTML:

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

    Erklären, eine Zahl, die vielleicht Aussehen Magie:

    • width: 141.421356% - berechnet die Diagonale des übergeordneten Platz (parent_square_size * square_root(2))
    • top: -20.710678% - bewegt rote Linie etwas oberhalb der Spitze, bis es richtig positioniert, wenn gedreht wird, ist dies der Hälfte des übersteigenden Breite
    • left: 50% und translate(-50%, 0) - zur Mitte ausrichten
    InformationsquelleAutor Luizgrs
  4. 6

    Hinzufügen von noch eine andere Methode um diesen Effekt zu erzielen, wie ich mit der pipe (|) mit FontAwesome stapeln und rotation, weil der Stil-Regeln sind einfach.

    Tipp: Sie können eine andere schriftart verwenden, für die pipe zu erhalten, abgerundeten enden etc. Sie können auch den gleichen Effekt erzielen, ohne Verpackung-tag, aber würden Sie haben, um Ihre eigenen stapeln/Positionierung Regeln.

    Abbildung der durchgestrichenen Symbol

    CSS:

    .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);
}

    HTML:

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

    InformationsquelleAutor mmarlow
  5. 2

    Dies ist nun nativ unterstützt von Font Awesome. Die Funktion wird als "gestapelte Symbole". Sehen hier.

    Code:

    HTML:

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

    InformationsquelleAutor davidthegrey
  6. 0

    Eine leichte Modifikation am fa-ban-Beispiel oben. Diese verwendet eine gebrochene em Positionierung anstelle von Pixeln. Auf diese Weise die Positionierung funktioniert, egal was die aktuelle Schriftgröße. Dieser verwendet auch eine Klasse statt einer id, so dass es verwendet werden kann, mehrere Male auf der gleichen Seite. Ich habe auch den slash voll rot. Ein tool-Tipp-popup wurde auch Hinzugefügt, mit dem 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>
    InformationsquelleAutor Dan
Schreibe einen Kommentar