Hallo zusammen

ich möchte gerade allen pdf Dateien die auf einer Seite sthen ein pdf Icon hinterlegen mit css.
So weit bin ich:

Code

a[href $='.pdf'] { 
	font-size: 12px;  
	padding-right: 27px; 
	background: transparent url(img/pdf.png) no-repeat center right; 
	background-size: 14px; 
} 

Nun ist es so, dass mir so das Icon doch etwas zu klein ist (passt sich der Zeilengrösse an)
Kann man nun das Icon etwas grösser machen als die Zeilenhöhe?

background-size geht nicht und ist glaube ich sowieso CSS3...

Wäre stark wenn da jemand einen Tipp hätte.

Gruss

Hallo sejau,

Das Icon passi sich normalerweise nicht der Zeilenhöhe an, sondern wird in 100% dargestellt. Du kannst zwar die Größe mit "background-size" (CSS3!!) beeinflussen. Besser wäre jedoch das Bild einfach zu vergrößern.

Viele Grüße
Florian

Hm komisch.
Ich hab nämlich das Bild schon zu gross auf dem Server.
Sagen wir mein Icon ist 48x48px gross.
Nun füge ich es ohne Grössenangabe so mit CSS ein, wie ich es oben gemacht habe.
Dann passiert folgendes. Vom Icon wird nur ein Ausschnitt angezeigt. Ich sehe zwar, dass das angezeigte Bildchen 48x48px gewesen ist, jedoch sehe ich vielleicht 16x48px.
Die Höhe wird also beschnitten und ich sehe nur einen Streifen, der so hoch ist wie die Textzeile. Deshalb die Annahme, dass das Icon 'angepasst' wird.

Mit padding-top und -bottom entsprechend deinem Icon sollte es gehen. Da dein Link ein inline-Element ist, wird der Zeilenfluss nicht darunter leiden.