Forum
Aktif konular
Üyeler
Kurallar
Arama
Bootstrap 4.0 Svg Kullanımı Bootstrap 4.0 Svg Kullanımı
-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
Arkadaşlar bootstrap'ı yeni öğreniyorum yukarıdaki kod şu svg dosyasını gösteriyor https://octicons.github.com/icon/search/ diyelim ki şu simgeyi göstermek istiyorum https://octicons.github.com/icon/mail/ nasıl birkod yapısı var çözemedim :)
turkz tarafından 27/Oca/18 08:45 tarihinde düzenlenmiştir -
hocam normal font-simgelerinde olduğu gibi class'ı değiştireyim simge de değişsin işlemiyor bunlarda (css ile bir yere kadar yapabiliyorsunuz), her objenin farklı yapısı var, en kolayı .svg'leri siteye img takısıyla ya da css de background-image:url(search.svg) gibi dahil etmeniz belki de akla ilk gelen, ama daha kolayı da şurda örneğini verdiğim yöntem sayılır;
http://jsbin.com/teguposocu/edit?html,css,output
SVG'nin çok güzel avantajlarından biri defs (definitions) takısı altında grup ve özel id olarak tanımladığınız svgleri <use xlink:href="#özel-id"></use> ile çağırabiliyor olmanız. Yalnız ikonları kullanacağınız yer sayfaya bu tanımlamaları dahil etmeniz gerekiyor. (sadece o sayfada kullanılacak olanları dahil etmek en verimli olan olacaktır).
mugen tarafından 27/Oca/18 09:45 tarihinde düzenlenmiştir -
Teşekkürler hocam bir de şu yöntemi buldum sonradan arayanlara kolaylık
<svg height="128" class="octicon octicon-mail" viewBox="0 0 14 16" version="1.1" width="112" aria-hidden="true"><path fill-rule="evenodd" d="M0 4v8c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1zm13 0L7 9 1 4h12zM1 5.5l4 3-4 3v-6zM2 12l3.5-3L7 10.5 8.5 9l3.5 3H2zm11-.5l-4-3 4-3v6z"/></svg>
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla