aktivieren deaktivieren font-awesome-icon

Habe ich Pfeil font-awesome icone. Ich versuche zu deaktivieren, das Symbol für einige validation Grund . Aber wenn ich eine option 'deaktiviert' ist , wird es nicht funktionieren. 

<div class="arrow bounce text-center" >
     <div class="fa fa-arrow-circle-down fa-3x " style="padding-bottom: 2px;" disabled="disabled"></div>
</div>
.arrow {
    text-align: center;
    margin:40px 0px;
}
.bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%,
    20%,
    30%,
    40%,
    50% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(-15px);
    }
}

was ist falsch in meinem code hier ?

  • Was bedeutet disabled dem div? Es ist ein Attribut für eine input nicht ein div. Auch, divs haben keine hrefs. Was versuchen Sie zu tun?
  • Versuchen, deaktivieren Sie den schriftart-Symbol. So verwendet Behinderten Eigenschaft. aber es funktioniert nicht.
  • Es wäre nicht, es ist nicht ein Attribut, das gilt für divs. Plus Ihre HTML & CSS nicht übereinstimmen.
  • developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/...
  • Es scheint, dass Sie gegangen sind, einige Informationen/code. Sie haben CSS-Animationen, aber nicht sehen, wie Sie angewendet wird, um den HTML-Code. Wie wird dies bewerkstelligt?
  • ich habe aktualisiert mein code .
  • Ich nehmen es sollte das Symbol nicht bounce, wenn Sie deaktiviert ist?
  • Ja, das Symbol sollte nicht hüpfen, wenn es deaktiviert ist. Incase , deaktivieren funktioniert nur für die Eingabe der Attribute, gibt es eine andere Möglichkeit kann dies tun.?
  • Auch bin ich mir nicht 100% sicher, dass href ist ein Attribut, das sollte in einem div - aber um fair zu sein habe ich eigentlich nicht gelesen haben, durch die HTML5-specs.
  • Siehe stackoverflow.com/questions/38781104/...

InformationsquelleAutor Ravikanth | 2016-09-27
  1. 0

    Arbeiten, aber nicht W3C-konform:

    .fa[disabled] {
    display: none !important;
}

    Jedoch die "disabled" - Attribut ist nicht W3C-kompatibel mit den "div" - tag, müssen Sie verwenden eine CSS-Klasse statt-und wechseln Sie mit JavaScript wenn es deaktiviert ist oder nicht.

    Hier ist ein Beispiel :

    CSS:

    .fa.disabled {
  display: none !important;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<button onclick="$('#AppleLogo').toggleClass('disabled');">Pop/unpop Apple</button>
<br/>
<i id="AppleLogo" class="fa fa-apple fa-3x" aria-hidden="true"></i>

    Vielfältige Lösungen :

    • display: none !wichtig; und font-size: 0px !wichtig; macht das gleiche machen. Das element scheint nicht gerendert von der Seite. Die !wichtig wichtig ist in diesem Fall zu überlegen sein FontAwesome Klassen.
    • visibility: hidden; ist ein bisschen anders, weil das element immer noch gerendert, aber es ist transparent. Farbe: transparent !wichtig; wird auch funktionieren auf die gleiche in diesem Fall. Es hält ihn gleichen Ort und Raum.

    Optional: FontAwesome ist in der "ich" - tag, wie beschrieben in der Dokumentation

    • Die disabled - Attribut und den Elementen, die es arbeitet mit der bereits in Angriff genommen, indem Sie Kommentare zu den OP ' s Frage und die Antworten darauf. FontAwesome verwendet die <i> ist aber nicht erforderlich, es ist ein inline-element, wie viele andere auch. Ich schlage vor, Sie aktualisieren Sie Ihre Antwort auf Ihren Vorschlag zum Umschalten einer CSS-Klasse.
    • Hi ! Ich aktualisierte mein Kommentar, indem Sie ein snippet und Erläuterung der verschiedenen Lösungen. Ich wurde gerade erklärt ihm, wie er sollte code, der die copy-paste-Lösung. Ich weiß, für den <i> ... nur zeigen, für eine bessere Nutzung. Ich hoffe, Sie genießen 🙂
    InformationsquelleAutor Quanta
  2. -1

    Das problem ist tha disabled-Attribut für input -, button-oder Anker-Elementen. Sie versuchen, "Behinderte" in einem div.
    Ändern Sie einfach:

    <div class="fa fa-arrow-circle-down fa-3x custom-color" href="#" style="padding-bottom: 2px;" disabled="disabled"></div>

    mit:

    <a class="fa fa-arrow-circle-down fa-3x custom-color" href="#" style="padding-bottom: 2px;" disabled="disabled"></a>

    Edit:

    Mein bad. Deaktiviert attr ist nicht für den Anker. Überprüfen Sie diese.
    Der einzige Weg, um zu verhindern, dass der Anker geklickt wird per JavaScript. Aber dieses Problem haben Sie nicht in Zusammenhang mit der font-awesome-icons

    • gibt es irgendein Attribut zu deaktivieren, das Symbol.
    • Ich habe versucht mit <a> auch anstelle von <div>. Dennoch ist es immer noch nicht funktioniert.
    • aber Sie möchten ein div-Element deaktiviert werden, zu tun, was? ein div ist nicht "anklickbar" - element. Nicht mit Gewalt.
    • Okay. aber <a> auch nicht in der Lage, Behinderte mit "disabled" - option. gibt es irgendeine andere Lösung ?
    • Ich bearbeitete die Antwort. Es scheint, dass der Anker nicht erlauben deaktiviert attr. Nur button und input zu tun.
    • disabled arbeitet mit form-Eingänge, d.h. <input>, <select>, <textarea> usw.

    InformationsquelleAutor JVilla
Schreibe einen Kommentar