Merhaba arkadaşlar benim küçük bir sorum olacak. Bir çok sitede görüyoruz ki linklerin yanında temsili ikonlar bulunuyor. Mesela ana sayfa için bir ev ikonu.
Basit, küçük bir ikon olur genelde.
Bunu nasıl yapabiliriz? Yan yana iki div açarak yapmak pek kullanışlı olmayabiliyor bazen.
Örnek olması amacıyla şu sayfaya bakabilirsiniz.
Yardımlarınızı bekliyorum.
Menüye nasıl resim eklenir? |
9 Mesajlar | 2.550 Okunma | ||
- Üyelik 13.12.2013
- Yaş/Cinsiyet 30 / E
- Meslek Web/Desktop Coder
- Konum İstanbul Avrupa
- Ad Soyad O** E**
- Mesajlar 210
- Beğeniler 20 / 20
- Ticaret 3, (%100)
- Üyelik 26.11.2013
- Yaş/Cinsiyet 30 / E
- Meslek Web master
- Konum Isparta
- Ad Soyad A** M**
- Mesajlar 226
- Beğeniler 85 / 59
- Ticaret 9, (%100)
eskiden img olarak konuyordu ama artık font olarak konuyor.Direk metnin soluna font iconunu koy yeter.
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/icons/
www.ustaderslik.com
- Üyelik 22.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek Bilgisayar Mühendisi
- Konum İstanbul Avrupa
- Ad Soyad B** C**
- Mesajlar 1843
- Beğeniler 269 / 263
- Ticaret 1, (%100)
normal menü kodlarınızı yazın daha sonra css deki
.menu a:link{} içerisine şunları yazabilirsin
işte karşında resimli menü :)
.menu a:link{} içerisine şunları yazabilirsin
background-image:url(resimler/Home_icon.png);
background-repeat:no-repeat;
background-position: 5px 10px;
padding-left: 25px;
işte karşında resimli menü :)
- Üyelik 13.12.2013
- Yaş/Cinsiyet 30 / E
- Meslek Web/Desktop Coder
- Konum İstanbul Avrupa
- Ad Soyad O** E**
- Mesajlar 210
- Beğeniler 20 / 20
- Ticaret 3, (%100)
normal menü kodlarınızı yazın daha sonra css deki
.menu a:link{} içerisine şunları yazabilirsin
işte karşında resimli menü :)
.menu a:link{} içerisine şunları yazabilirsin
background-image:url(resimler/Home_icon.png);
background-repeat:no-repeat;
background-position: 5px 10px;
padding-left: 25px;
işte karşında resimli menü :)
Hocam bu şekilde olmadı, sadece a etiketine yaptığım zaman, tüm a etiketlerine uyguluyor haliyle. Benim her a etiketi için ayrı bir ikon yerleştirmem gerekiyor.
- Üyelik 22.01.2014
- Yaş/Cinsiyet 29 / E
- Meslek Bilgisayar Mühendisi
- Konum İstanbul Avrupa
- Ad Soyad B** C**
- Mesajlar 1843
- Beğeniler 269 / 263
- Ticaret 1, (%100)
Pardon genel olarak yazmisim. Bir class olustur sadece o link ıcin ve bu kodlati yazabilirsin yeniden
.divimiz a:link{ } boyle bir şey yapabilirsin. Maalesef ayri ayri yapiliyor. Her biri icin yapman gerek. Su an telwfondan girmesem aynisinin benzerine table ve css kullanarak yazardim. Ama mantık olarak 2 sütunluk tablolarda sola yaslı fotoğraflar ve sağa yasli linkler olarak da yapabilirsin daha düzgün gorünebilmesi için
.divimiz a:link{ } boyle bir şey yapabilirsin. Maalesef ayri ayri yapiliyor. Her biri icin yapman gerek. Su an telwfondan girmesem aynisinin benzerine table ve css kullanarak yazardim. Ama mantık olarak 2 sütunluk tablolarda sola yaslı fotoğraflar ve sağa yasli linkler olarak da yapabilirsin daha düzgün gorünebilmesi için
- Üyelik 05.02.2014
- Yaş/Cinsiyet 28 / E
- Meslek developer
- Konum Bursa
- Ad Soyad F** Ö**
- Mesajlar 704
- Beğeniler 195 / 222
- Ticaret 8, (%100)
Gerekli cevaplar verilmiş,
---------------------------------------------------------------
Örnek
Örnek
css,
.menu a.men1 {background-image:url(resim.png);}
.menu a.men2 {background-image:url(resim2.png);}
eskiden img olarak konuyordu ama artık font olarak konuyor.Direk metnin soluna font iconunu koy yeter.
http://fortawesome.github.io/Font-Awesome/icons/
http://fortawesome.github.io/Font-Awesome/icons/
normal menü kodlarınızı yazın daha sonra css deki
.menu a:link{} içerisine şunları yazabilirsin
işte karşında resimli menü :)
.menu a:link{} içerisine şunları yazabilirsin
background-image:url(resimler/Home_icon.png);
background-repeat:no-repeat;
background-position: 5px 10px;
padding-left: 25px;işte karşında resimli menü :)
---------------------------------------------------------------
Hocam bu şekilde olmadı, sadece a etiketine yaptığım zaman, tüm a etiketlerine uyguluyor haliyle. Benim her a etiketi için ayrı bir ikon yerleştirmem gerekiyor.
Örnek
Örnek
css,
.menu a.men1 {background-image:url(resim.png);}
.menu a.men2 {background-image:url(resim2.png);}
EFSANE! | omerbeyoglu.me
- Üyelik 13.12.2013
- Yaş/Cinsiyet 30 / E
- Meslek Web/Desktop Coder
- Konum İstanbul Avrupa
- Ad Soyad O** E**
- Mesajlar 210
- Beğeniler 20 / 20
- Ticaret 3, (%100)
Pardon genel olarak yazmisim. Bir class olustur sadece o link ıcin ve bu kodlati yazabilirsin yeniden
.divimiz a:link{ } boyle bir şey yapabilirsin. Maalesef ayri ayri yapiliyor. Her biri icin yapman gerek. Su an telwfondan girmesem aynisinin benzerine table ve css kullanarak yazardim. Ama mantık olarak 2 sütunluk tablolarda sola yaslı fotoğraflar ve sağa yasli linkler olarak da yapabilirsin daha düzgün gorünebilmesi için
.divimiz a:link{ } boyle bir şey yapabilirsin. Maalesef ayri ayri yapiliyor. Her biri icin yapman gerek. Su an telwfondan girmesem aynisinin benzerine table ve css kullanarak yazardim. Ama mantık olarak 2 sütunluk tablolarda sola yaslı fotoğraflar ve sağa yasli linkler olarak da yapabilirsin daha düzgün gorünebilmesi için
Anladım, gayet açıklayıcı oldu. Menüde ki her bir link için ayrı ayrı ikonlarla birlikte tanıttım oldu. Çok teşekkür ederim.
Gerekli cevaplar verilmiş,
---------------------------------------------------------------
Örnek
Örnek
css,
.menu a.men1 {background-image:url(resim.png);}
.menu a.men2 {background-image:url(resim2.png);}
---------------------------------------------------------------
Örnek
Örnek
css,
.menu a.men1 {background-image:url(resim.png);}
.menu a.men2 {background-image:url(resim2.png);}
Evet gerekli cevaplar verildi, teşekkür ederim :)
- Üyelik 10.10.2013
- Yaş/Cinsiyet 34 / E
- Meslek Yazılımcı
- Konum İzmir
- Ad Soyad i** A**
- Mesajlar 363
- Beğeniler 135 / 104
- Ticaret 7, (%100)
Google üzerinden glyphicon olarak aratabilirsin.
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)