@@Carmen > Jetzt möchte ich gerne nach dem Icon ein Border hinzufügen, dass es ein bisschen abgetrennt steht und dem ganzen einen Hintergrund zuordnen. > > Wenn ich ein border-right hinzufüge wird dieser ans Ende des Felder platziert und nicht wie gewünscht nach dem Icon. > > Muss ich dem Icon ein eigenes DIV verpassen? Nein. Du kannst die vertikale Linie und die Hintergrundfarbe für den Bereich des Icons [mit einem Gradienten machen](http://codepen.io/gunnarbittersmann/pen/wGxQrb). Was ich noch gemacht habe: SVG fürs Icon. Deine PNG-Datei fürs Icon ist mit 512 × 512 Pixeln und 7 kB viel zu groß. Die solltest du im Bildverarbeitungsprogramm deiner Wahl auf die tatsächlich benötigte(n) Größe(n) runterrechnen. (Plural wegen hochauflösender Displays.) Oder doch besser das für Icons geeignete Format verwenden: SVG. Ich hab deine PNG-Datei mal durch [diesen Konverter](http://image.online-convert.com/convert-to-svg) gejagt: raus kommen 1257 Bytes. Wenn ich das SVG selber schreibe, würde ich bei diesem Brief-Icon schätzungsweise auf 200 bis 300 Bytes kommen. Außerdem ist die Vektorgrafik bei jeder Größe scharf. Und wie man im Beispiel sieht, klappt’s auch problemlos mit der Hintergrungfarbe, was bei einer PNG-8-Rastergrafik auch nicht der Fall ist. LLAP 🖖 -- _“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}

@@Carmen > Jetzt möchte ich gerne nach dem Icon ein Border hinzufügen, dass es ein bisschen abgetrennt steht und dem ganzen einen Hintergrund zuordnen. > > Wenn ich ein border-right hinzufüge wird dieser ans Ende des Felder platziert und nicht wie gewünscht nach dem Icon. > > Muss ich dem Icon ein eigenes DIV verpassen? Nein. Du kannst die vertikale Linie und die Hintergrundfarbe für den Bereich des Icons [mit einem Gradienten machen](http://codepen.io/gunnarbittersmann/pen/wGxQrb). Was ich noch gemacht habe: SVG fürs Icon. Deine PNG-Datei fürs Icon ist mit 512 × 512 Pixeln und 7 kB viel zu groß. Die solltest du im Bildverarbeitungsprogramm deiner Wahl auf die tatsächlich benötigte(n) Größe(n) runterrechnen. (Plural wegen hochauflösender Displays.) Oder doch besser das für Icons geeignete Format verwenden: SVG. Ich hab deine PNG-Datei mal durch [diesen Konverter](http://image.online-convert.com/convert-to-svg) gejagt: raus kommen 1257 Bytes. Wenn ich das SVG selber schreibe, würde ich bei diesem Brief-Icon schätzungsweise auf 200 bis 300 Byttes kommen. Außerdem ist die Vektorgrafik bei jeder Größe scharf. Und wie man im Beispiel sieht, klappt’s auch problemlos mit der Hintergrungfarbe, was bei einer PNG-8-Rastergrafik auch nicht der Fall ist. LLAP 🖖 -- _“You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.”_{: lang="en"} —Stefan Tilkov _[Selfcode](http://community.de.selfhtml.org/fanprojekte/selfcode.htm): `sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|`_{: style="display: block; font-size: 0.875em; font-style: inherit; margin-top:1.5em"}