i class ile header'ın üstüne iletişim whatsapp nasıl eklenir ?

30-12-2017, 14:02:20

Üyeliği durduruldu

Merhabalar,
Arkadaşlar wordpresste headerin üstüne birşeyler yapmak istiyorum.
şu şekilde ;

Yalnız şöyle bi sıkıntı var. Sol tarafa tel i sağ tarafa whatsapp iletişimi koymak istiyorum. ikisini bir divin içine mi koyayım nasıl yapayım yapısı nasıl olmalı ?
ben şu şekilde yaptım yukardakini.

.headerust a { color: white; display: inline-block; float: right; font-size: 15px; font-weight: bold; font-family: 'Oregano', cursive; } .headerust { height: 35px; background-color: rgb(206, 28, 55); display: block; }

<div class="headerust"> <i class="fa fa-whatsapp" style="color: white; font-size: 16px"><a href="/">Whatsapp İletişim:533 391 3306</a></i></div> <div class="headerust"> <i class="fa fa-whatsapp" style="color: white; font-size: 16px"><a href="/">Whatsapp İletişim:533 391 3306</a></i></div>

Bunu nasıl yapabilirim ? Display:inline block u divin içindeki a ya mı vermeliyim class a mı vermeliyim. Bunları anlayamıyorum.

i class kullanımı nasıl olmalı onu da anlatabilir misiniz. Şimdiden teşekkürler.

Arkadaşlar hallettim teşekkürler.

<div class="headerust">
<i class="fa fa-whatsapp" style="color: white;font-size: 16px;line-height: 2.2;float:  left;">
<a href="/">Whatsapp:533 391 3306
</a></i>
<i class="fa fa-phone" style="color: white;font-size: 16px;position: relative;float:  right;line-height: 2.2;right: 5px;">
<a href="/">Telefon:444 9 139
</a></i></div>

.headerust a {
    color: white;
    display: inline-block;
    float: right;
    font-size: 15px;
    font-weight: bold;
     font-family: 'Oregano', cursive;
}

.headerust {
    height: 35px;
    background-color: rgb(206, 28, 55);
    display: block;
}

Bu şekilde hallettim. İsteyen arkadaşlar faydalanabilir.

30-12-2017, 16:26:50

Hunper

  <div class="spe-col1">
  <a class="spe-links" href="tel:+905333913306" rel="canonical" title="Telefon"><i class="fa fa-phone" aria-hidden="true"></i> Telefon: 0533 391 33 06</a>
  </div>
  <div class="spe-col2">
  <a class="spe-links" href="https://api.whatsapp.com/send?phone=+905333913306&amp;text=Merhaba" rel="canonical" title="Whatsapp'tan yaz"><i class="fa fa-whatsapp" aria-hidden="true"></i> Whatsapp: 0533 391 33 06</a>
  </div>
  <div class="spe-cle"></div>

css kodları

  .spe-links {
  color:#fff;
  display:inline-block;
  font-weight:600; /* yazı tipine bağlı kalınlık kazandırır font-weight: bold; olarak da kullanabilirsin */
  }
  .spe-col1 {
  float:left;
  }
  .spe-col2 {
  float:right;
  }
  .spe-cle {
  clear:both;
  }

Yukarıda verdiğim whatsapp linki mobil cihazdan tıklandığında doğrudan uygulamayı açar. Telefona tıklandığında ise arama ekranı çıkar.

i class diye bir şey yoktur. i aslında italik yazım için kullanılan bir koddur. Fontawesome <i> tagını icon eklemek için kullandığı için hazır fontawesome kodunu kullanıyorsun sen de. Aynı mantıkla sen de bir icon oluşturabilirsin. Bunun için illa i kullanmana gerek yok, span veya div'de kullanabilirsin.

30-12-2017, 16:37:34

#3

~~angelicmoon~~

Üyeliği durduruldu

Hunper adlı üyeden alıntı: mesajı görüntüle

<div class="spe-col1"> <a class="spe-links" href="tel:+905333913306" rel="canonical" title="Telefon"><i class="fa fa-phone" aria-hidden="true"></i> Telefon: 0533 391 33 06</a> </div> <div class="spe-col2"> <a class="spe-links" href="https://api.whatsapp.com/send?phone=+905333913306&text=Merhaba" rel="canonical" title="Whatsapp'tan yaz"><i class="fa fa-whatsapp" aria-hidden="true"></i> Whatsapp: 0533 391 33 06</a> </div> <div class="spe-cle"></div>
css kodları
.spe-links { color:#fff; display:inline-block; font-weight:600; /* yazı tipine bağlı kalınlık kazandırır font-weight: bold; olarak da kullanabilirsin */ } .spe-col1 { float:left; } .spe-col2 { float:right; } .spe-cle { clear:both; }
Yukarıda verdiğim whatsapp linki mobil cihazdan tıklandığında doğrudan uygulamayı açar. Telefona tıklandığında ise arama ekranı çıkar.

i class diye bir şey yoktur. i aslında italik yazım için kullanılan bir koddur. Fontawesome <i> tagını icon eklemek için kullandığı için hazır fontawesome kodunu kullanıyorsun sen de. Aynı mantıkla sen de bir icon oluşturabilirsin. Bunun için illa i kullanmana gerek yok, span veya div'de kullanabilirsin.

hocam rel=cannonical ve aria hidden=true nedir ?
bir de son açtığım konuya bakar mısın ?