Как установить иконку в качестве фона элементу?

Question

[Isaac Clark]

Пытаюсь сделать фон для div

div {
              position: relative;

              &:before {
                content: "";
                background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#0172DB' fill-rule='nonzero' d='M8 0C3.589 0 0 3.589 0 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8zm0 1.333A6.656 6.656 0 0 1 14.667 8 6.656 6.656 0 0 1 8 14.667 6.656 6.656 0 0 1 1.333 8 6.656 6.656 0 0 1 8 1.333zm2.792 2.709a.363.363 0 0 0-.25.166L7.27 9.062l-1.542-1.52c-.133-.2-.388-.216-.52-.084l-.605.604c-.133.201-.133.472 0 .605L6.937 11c.133.068.32.208.521.208.133 0 .347-.07.48-.27l4-5.876c.132-.2.057-.388-.209-.52l-.666-.48a.483.483 0 0 0-.271-.02z'/></svg>")  no-repeat;
               
               height: 40px;
                width: 60px;
              }

            }

но поему-то иконка не отображается, в чем может быть причина?

Answer 1

[Рома Зварич]

SVG можно использовать в CSS с помощью data:URI, но без кодирования это работает только в браузерах, работающих на движке Webkit. Если перекодировать SVG, используя encodeURIComponent, это будет работать везде.

Закодированный SVG можно использовать в свойствах background и border-image

Вот сервис Юли Бухваловой, который помогает в кодировании: URL-encoder for SVG
P.S. Кодированный SVG-код можно обратно раскодировать в обычный вид, если нужно

А вот пример Вашего SVG, подставленного в background после кодирования

https://codepen.io/hisbvdis/pen/wvBwRYP

Answer 2

[its2easyy]

Спец символы в svg нужно энкодить сначала, можно в онлайн сервисе типа такого https://yoksel.github.io/url-encoder/