Icon einfügen - Submit - Input

**Ripperz** · 30.03.2018, 00:32

Hallo,
ich habe einen Button mit Text. Ich möchte gerne vor dem Text "Registrieren" noch ein Icon einfügen. Leider bekomme ich das nicht hin. Kann mir einer ein Tipp geben?

PHP-Code:


<div class="submit"><a title="Registrieren" href="registrieren.html"><input class="submit" type="submit" value="Registrieren"></a></div>

**mlweb** · 30.03.2018, 10:47

Ich würde das so spontan mit css und :before lösen.

**Ripperz** · 30.03.2018, 13:15

ja ich auch, allerdings rutscht dann das icon vor das input. Es soll mit ca 10px abstand zum Text sein. Kann mir jemand eine Lösung geben?

**Andreas** · 01.04.2018, 02:27

Das HTML sieht irgendwie falsch aus. Ein INPUT gewrappt von einem A-Tag? Nimm mal das A-Tag dort weg, dann kannst du das so machen.

HTML-Code:

input {
	background-color: snow;
	color: black;
	padding: 0 1em 0 40px;
	line-height: 40px;
	background-image: url(https://placeimg.com/24/24/tech/sepia);
	background-position: 8px center;
	background-repeat: no-repeat;
}

Mit ::before ist in diesem Fall schlecht. Erstens, weil man einem INPUT keine Pseudoelemente geben kann. Zweitens, weil dieses ::before dann nicht auf das Klick reagieren würde, wenn es auf dem div.submit läge.