Css ile Acrobat, Word, Excel ve Quicktime gibi bağlantılara icon atama

Css ile bağlantılara ikon görseli eklenebiliyor örneğin aşağıdaki gibi;
<a class="ikon-baglanti" href="baglanti.html">baglanti</a>
.ikon-baglanti {padding-right:18px; background:transparent url(icon_pdf.gif) no-repeat center right;}

Fakat şimdi burada yazacağım yöntem class veya id tag i kullanmadan sayfada vermiş olduğunuz bağlantı örneğin Acrobat, Word, Excel veya Quicktime gibi dosyalar ise ona otomatik olarak ikon atamak olacak.

Bunu örneklersek şöyle yapıyoruz;

Html kısmı:
<a href="kalsor/sunum12.pdf">pdf için</a>

Css kısmı:
a[href $='.pdf'] {padding-right: 18px; background: transparent url(icon_pdf.gif) no-repeat center right;}

Yukarıdaki bağlantı .pdf olduğu için css den .pdf lere olan bağlantıları aşağıdaki gibi yapmış olduk, sonuç aşağıdaki gibi olacak;

Bu konuda daha fazla bilgi almak için css, css hack, css ikon, css ipucu, css teknigi, css teknikleri, dizayn, icon, icons, internet, ipucu, links, tasarim, web tasarim, web tasarimi terimleri/etiketlerini ve Css ile Acrobat, Word, Excel ve Quicktime gibi bağlantılara icon atama başlığını site içerisinde arayabilirsiniz. Aşağıdaki seçenekleri de kullanabilirsiniz, unutmayın bunların hepsi bedavadır.

• Wordpress de tarayıcıya göre body class atamak (0)
• Web tasarımı ve Türkiye (2)
• Türkçe karakterler (8)
• Siteniz için online araçlar (11)
• En iyi 20 çevirimiçi favori ikon üreticisi (10)

Etiketler: css, css hack, css ikon, css ipucu, css teknigi, css teknikleri, dizayn, icon, icons, internet, ipucu, links, tasarim, web tasarim, web tasarimi