"Enter"a basıp içeriğe geçin

Bootstrap 4 Nav icon renk değiştirme

 

 

 

Bootstrap 4 beta sürümünde ciddi değişiklikler yapıldı eski bootstrap sürümlerde icon setleri tarafından kullanılan bootstrap nav icon bootstrap 4 ile birlikte svg kullanılarak yapıldığını görüyoruz.  Bootstrap artık herşeyden keserek daha stabil ve sadece çalıştığını gösteriyor fakat yıllardan beri gelen alışkanlıklarımız olduğu için bir çok arkadaş benim gibi navigation u yaparken icon’a color verip daha sonra bu renk neden değişmedi diyebilir 🙂 Tabi gerçeği iconun svg ile yapıldığını görene kadar arkadaşlar icon’un rengini değiştiremizin bir kaç yolu var hemen sıralayalım.

navbar-light ı kullandıysanız bunu navbar-inverse classı ile değiştirebilirsiniz. çünkü navbar-light beyaz renginin 50%(opacity) kullanır. navbar-inverse classı kullanırsanız bu durum siyah rengi için geçerli olur ve büyük bir ihtimallede işinizi görür yok ben özel bir renk tanımlayacağım derseniz.

Buyrun: Aşağıdaki kodda bulunan rgb renk kodunu kendinize göre düzenleyerek sonuç’a ulaşabilirsiniz.

 

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

kaynaklar:

https://www.codeply.com/go/4FdZGlPMNV

https://stackoverflow.com/questions/42586729/bootstrap-4-change-hamburger-toggler-color

  • OrtakKılavuz

    Hocam bunu arıyordum çok sağolun tek türkçe kaynak burada sanırım