Web sitesine tıklanabilir sosyal medya ikonları nasıl eklenir?

Burak52TR · 31 Aralık 2020

Bir ödev için ücretsiz olarak web sitesi yapıyorum. Daha önce hiç kod düzenleme tecrübem olmadı. Yaptığım projede web sitesine tıklanabilir sosyal medya ikonları eklemeye çalışıyorum. Hazır bir kod üzerinde oynamalar yaparak oluşturdum fakat ikon boyutlarını büyütmeyi beceremedim.

Ödev için yaptığım websitesi bu : isekairestaurant.tr.gg

Düzenlediğim kod bu :

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="isekairestaurant - Ana Sayfa" target="_blank"></a> </div> </div> <div class="container-fluid text-center social"> <a target="_blink" href="İsekai Restaurant"><span class="fa-stack fa-lg"><i class="fa fa-facebook fa-stack-1x"></i> </span></a> <a target="_blink" href="Login • Instagram"><span class="fa-stack fa-lg"><i class="fa fa-instagram fa-stack-1x"></i> </span></a> <a target="_blink"

Ben bunun sayfadaki boyutunu nasıl büyültebilirim veya güzel başka bir bildiğiniz animasyonlu vesaire kod var mı? Bedava-sitem üzerinden hazırlıyorum.

RockNRolla · 1 Ocak 2021

İconlar için fontawesome kullandığını gördüm kendi CSS dosyasında classlara atanmış boyutlar var. fa-2x classını eklersen icon büyür.

Detaylı bilgisi bu linkte var.

Sizing Icons

fontawesome.com

Kod:

Sendeki
<i class="fa fa-instagram fa-stack-1x">

Örneğin:
<i class="fa fa-instagram fa-stack-1x fa-2x">

Burak52TR · 1 Ocak 2021

Teşekkür ederim işe yaradı. Peki bu iki logo arasına nasıl biraz boşluk koyabilirim ve dışta geniş bir çerçeve var onu nasıl gizleyebilirim?

Güncel kod şu şekilde :

HTML:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="https://isekairestaurant.tr.gg/" target="_blank"></a> </div> </div> <div class="container-fluid text-center social"> <a target="_blink" href="https://www.facebook.com/isekairestaurant/"><span class="fa-stack fa-lg"><i class="fa fa-facebook fa-stack-1x fa-2x""></i> </span></a> <a target="_blink"  href="https://www.instagram.com/isekairestaurant/"><span class="fa-stack fa-lg" width="500px" height="auto"><i class="fa fa-instagram fa-stack-1x fa-2x"></i> </span></a> <a target="_blink"

RockNRolla · 1 Ocak 2021

Aşağıdaki divler fazla header logo için ayarlamışlar bunları kullanmayacaksan aşağıdaki divleri sil

HTML:

<div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="https://isekairestaurant.tr.gg/" target="_blank"></a> </div> </div>

Aşağıdaki class tan "background-color: #ffffff !important;" silersen arkasındaki beyazlık gider.

CSS:

.module-small, .module-small a {
    background-color: #ffffff !important;
    color: #666666;
}

Simgeleri kutuda ortalamak için .social classı açıp ona padding-top ve min-height değerleri verebilirsin.

CSS:

.social {
    padding-top: 20px;
    min-height: 70px;
}

sonuç bu şekilde olur düzenlemeyi yaparken chrome da sağ tık incele dersen oradan class ları seçip ekleyip css inde değişiklik yapabilirsin birebir görürsün daha kolay olur senin için. daha sonra beğendiğin değişikliği koduna ekleyebilirsin.

Web sitesine tıklanabilir sosyal medya ikonları nasıl eklenir?

Burak52TR

Megapat

RockNRolla

Megapat

Sizing Icons

Burak52TR

Megapat

RockNRolla

Megapat