Lupen-Zeichen im Sende-Button

index.html

<div class="inhalt">
    <p>Zuerst der Sende-Button als <code>input</code>-Element, zuerst mit &#128269; (<code>&amp;#128269;</code>)...</p>
    <form>
        <input name="suchfeld" tiitle="Das Suchwort eingeben" />
        <input name="suchbutton" type="submit" value="&#128269;" title="Suche starten" />
    </form>

    <p>... und jetzt mit &#128270; (<code>&amp;#128270;</code>):</p>

    <form>
        <input name="suchfeld" tiitle="Das Suchwort eingeben" />
        <input name="suchbutton" type="submit" value="&#128270;" title="Suche starten" />
    </form>
  
  <p>In CSS wären diese Angaben entsprechend <code>'\1F50D'</code> bzw. <code>'\1F50E'</code>

    <p>Das gleiche noch einmal, aber mit <code>button</code> anstatt <code>input</code> für den Sende-Button:</p>

    <form>
        <input name="suchfeld" title="Das Suchwort eingeben" />
        <button title="Suche starten">&#128269;</button>
    </form>

    <form>
        <input name="suchfeld" title="Das Suchwort eingeben" />
        <button title="Suche starten">&#128270;</button>
    </form>

    <p>Und zu Letzt als Font-Icon von Font Awesome (<code>&lt;i class="fa fa-search"&gt;&lt;/i&gt;</code>):</p>

    <form>
        <input name="suchfeld" title="Das Suchwort eingeben" />
        <button title="Suche starten"><i class="fa fa-search"></i></button>
    </form>
</div>

Lupen-Zeichen im Sende-Button.markdown

Lupen-Zeichen im Sende-Button

Lupen-Icon im Sende-Button. Einmal als Symbol und das andere Mal als Font-Icon

A Pen by Vlad on CodePen.

License.

style.css

.inhalt {padding: 1rem;}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />