Here is the HTML code snippet I'm working with:
<a class="iconContainer" href="#">
<span class="containerIcon chevron-right"/>
Test
</a>
And this is the corresponding CSS code:
.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;
}
Despite following the instructions from the Bootstrap icons documentation, the icon is not showing up as expected. Here is the link to the Bootstrap icons documentation for reference:
If anyone has any insights into what might be causing this issue, please let me know. I have also provided the jsFiddle link for further inspection. https://jsfiddle.net/w5bvs7n6/8/
Edit: I suspect that the problem could be related to the empty content property, but I'm unsure how it should be handled if that's the case.