Aloha zurück ;)

Dann suchst du linear-gradient. Wie weich der ist hast du selbst in der Hand ;)

Hab damit etwas gespielt background-image: linear-gradient(133deg, white 0%, black 50%); http://jsfiddle.net/sweu022f/5/

Auch das kannst du tun. Klarer Vorteil der Variante, die Matthias vorgeschlagen hat: Du kannst das Bild im CSS festlegen. Dadurch werden viele sinnvolle Dinge möglich, z.B. das Bild durch media-query zu kontrollieren (kein oder anderes Bild für kleine Bildschirme aka Smartphones) oder auch die Entscheidung ob Haus oder Telefon einfach durch die Klasse des übergeordneten Elements festmachen. Außerdem ist das auch die semantisch sinnvollere Variante, da das Bild keinem inhaltlichen, sondern nur gestalterischem Zweck dient. Du kannst aber auch mit vollem Bewusstsein eine weniger sinnvolle Alternative wählen, das ist deine Entscheidung ;)

Hatte mich noch nie mit :before beschäftigt, ich muss sagen es ist toll. Damit spare ich mir HTML und kann wirklich wie du schon richtig geschrieben hast mit Media-Querys auf Bildschirmgrößen reagieren. Bei einem Handy ist z.B. das Icon überflüssig und kann weg bzw. ich kann den Verlauf löschen, sieht eh keiner :D

Einfach mal ausprobieren. Das Wiki ist diesbezüglich mit Informationen ja auch nicht gerade spärlich ;) Wirst schon sehen: Ein kleiner Schatten reicht und das Ganze wirkt plastisch ;)

Meinst du ich brauch hier wirklich noch einen Schatten? http://jsfiddle.net/sweu022f/5/

Ob das nachher in den Stil des Gesamtkonzepts passt musst du entscheiden, prinzipiell weiß ich nicht, was dagegen spricht. Sicherlich keine schlechte Wahl, da Vektorgrafik.

Hab mich für dieses Icon entschieden http://www.flaticon.com/free-icon/phone-general_9243 mal schauen ob ich es als SVG Datei einbinde.