2016-03-20 6 views
0

Ich versuche, ein Suchsymbol in <input type="submit"> mithilfe von IcoMoon hinzuzufügen. Ich kann <i> innerhalb <input> nicht einschließen.Hinzufügen eines Symbols für die Eingabeart Senden mit IcoMoon

Ich versuchte folgende Methode der Verwendung von Pseudo-Element :before, funktioniert aber nicht.

HTML:

<div class="top-search"> 
    <form class="navbar-form navbar-right"> 
     <input type="text" class="form-control" placeholder="Search..."> 
     <input type="submit" class="icon-search" value="e90e"> 
    </form> 
</div> 

CSS:

@font-face { 
    font-family: 'icomoon'; 
    src: url('icomoon.eot?lkqd5y'); 
    src: url('icomoon.eot?lkqd5y#iefix') format('embedded-opentype'), 
     url('icomoon.ttf?lkqd5y') format('truetype'), 
     url('icomoon.woff?lkqd5y') format('woff'), 
     url('icomoon.svg?lkqd5y#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'icomoon' !important; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.icon-search:before { 
    content: "\e90e"; 
} 

Antwort

1

<input> Element erlaubt keine Pseudo-Inhalt zu haben. Sie können stattdessen <button type="submit"> verwenden. So können Sie entweder :before verwenden oder <i> direkt in das Tag einfügen.

+1

aber schließlich fand ich diese 'und es funktioniert –

+0

Ja, das könnte eine andere Möglichkeit sein, es zu tun, der Punkt ist Sie können keine Pseudoelemente für das Eingabe-Tag verwenden. – Stickers

+0

yeai muss oben wissen verwendet werden können oder ?? weil ich keine andere Methode finde –