bootstrap icon css before after kullanımı

bootstrap iconlarını content kodu girerek gösteremiyor muyuz?

sitesinde bu şekilde kullanım örneği verilmiş ama anlamadım.


.bi::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}

font-family vererek dener misin?

nasıl hocam? örnek verebilir misin?

fontavesome gıbı ıcon sıtelerınden ıcon degılde resım bullnacakasan background seklınde verebılrısın yok ıcon kullnacam dersen content ın ıcınde ıconun font kodunu yazarsın

content kısmına SVG kodu giremezsiniz, bundan dolayı dediğiniz şekilde olmaz. Sitesinde örnekteki gibi yapmanız lazım, mesela SVG kodu şu olsun (alarm-fill):

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">  <path d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z"/>
</svg>

SVG kodunu kopyaladık, https://yoksel.github.io/url-encoder/ adresinde Insert SVG kutucuğuna yazdık. Ready for CSS kutucuğunda CSS kodumuz geliyor, onu kopyalıyoruz direkt: https://prnt.sc/x1x3v3

Sonra örnekteki kısma yerleştiriyorsunuz, bu durumda CSS kodu şöyle oldu:

.bi-alarm-fill::before {
display: inline-block;
content: "";
width: 1rem;
height: 1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-alarm-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zm2.5 5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}

Bunu HTML'de şu şekilde kullanırsınız:
<i class="bi-alarm-fill"></i>

Teşekkürler halletim hocam. Bunun başka bir yöntemi var mı bildiğiniz? encode için verdiğiniz siteyi siz mi hazırladınız?

Verdiğim siteyi ben hazırlamadım, manuel de encode edilir ama uğraşmaya gerek yok. Başka ne tür bir yöntem lazım size bilmiyorum ancak HTML'de direkt SVG olarak kullanın ikonları, daha kolay olur.

h2 h3 içinde kullanmak için css ihtiyacı duymuştum.

satır içinde evet daha rahat kullanımı var. Seo açısından h tagları içinde ne kadar doğru olur kullanımı emin olamadım.