Using background image css for bootstrap icons

Question

This is my HTML:

<a class="iconContainer" href="#">
  <span class="containerIcon chevron-right"/>
  Test
</a>

And this is my css:

.chevron-right::before {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

For some reason the icon is not being displayed. This is almost similar to the example shown in the documentation for bootstrap icons here: https://icons.getbootstrap.com/#usage

Does anyone have any insight into what I'm doing wrong? I imagine I'm missing something very obvious. Here is the jsFiddle link for it. https://jsfiddle.net/w5bvs7n6/8/

Edit: I imagine this has to do with content being empty but I'm clueless how it would work if it wasn't.

Answer 1

The hard way is you must use a converter tool. to be able to use the SVG in your CSS such as URL-encoder for SVG

So you need to find the SVG file open it copy it's content to the tool and let the magic happen then you need to copy the code that's fit for you.

After the process, you get a working and ready to paste code. You just have to copy it and use it.

.header__shape-quote::before {
    font-size: 4rem;
    position: absolute;
    top: -50px;
    left: -60px;
    background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    background-size: 40px 40px;
    content: "";
}

The simple way is to just follow the path and call it.

.header__shape-quote::before {
    font-size: 4rem;
    position: absolute;
    top: -50px;
    left: -60px;
    /* calling the icon from the folder */
    background-image: url("../images/bootstrap-icons-1.0.0/chevron-right.svg");
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    background-size: 40px 40px;
    content: "";
}