Font Awesome (6.2) Duotone in Bootstrap 5 breadcrumb divider not working

Artur 0
Viewed 26

i try change Bootstrap 5.2 breadcrumb divider, and add Font awesome Duotone icon. But He not showing, I don't understand what the problem is, any ideas? Thanks.

The most interesting thing is that the inspection shows the SVG on the screenshot is visible

Html Code

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Css code

.breadcrumb-item+.breadcrumb-item::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48ZGVmcz48c3R5bGU+LmZhLXNlY29uZGFyeXtvcGFjaXR5Oi40fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJmYS1wcmltYXJ5IiBkPSJNNDQ4IDI1NmMwIDguMTg4LTMuMTI1IDE2LjM4LTkuMzc1IDIyLjYybC0xNjAgMTYwYy05LjE1NiA5LjE1Ni0yMi45MSAxMS44OS0zNC44OCA2LjkzOEMyMzEuOCA0NDAuNiAyMjQgNDI4LjkgMjI0IDQxNlY5NmMwLTEyLjk0IDcuNzk3LTI0LjYxIDE5Ljc1LTI5LjU2YzExLjk3LTQuOTUzIDI1LjcyLTIuMjE5IDM0Ljg4IDYuOTM4bDE2MCAxNjBDNDQ0LjkgMjM5LjYgNDQ4IDI0Ny44IDQ0OCAyNTZ6Ii8+PHBhdGggY2xhc3M9ImZhLXNlY29uZGFyeSIgZD0iTTIyNCAzMjBIMzJjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJWMjI0YzAtMTcuNjcgMTQuMzMtMzIgMzItMzJoMTkyVjMyMHoiLz48L3N2Zz4=);
}

Screen Shot enter image description here

font-awesome bootstrap-5 css html
1 Answers

It probably appears but too big. I tried instead using the image as background rather than content, and with a little tweaking it can work.

.breadcrumb-item+.breadcrumb-item::before {
  content: '' !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgUHJvIDYuMi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDIyIEZvbnRpY29ucywgSW5jLiAtLT48ZGVmcz48c3R5bGU+LmZhLXNlY29uZGFyeXtvcGFjaXR5Oi40fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJmYS1wcmltYXJ5IiBkPSJNNDQ4IDI1NmMwIDguMTg4LTMuMTI1IDE2LjM4LTkuMzc1IDIyLjYybC0xNjAgMTYwYy05LjE1NiA5LjE1Ni0yMi45MSAxMS44OS0zNC44OCA2LjkzOEMyMzEuOCA0NDAuNiAyMjQgNDI4LjkgMjI0IDQxNlY5NmMwLTEyLjk0IDcuNzk3LTI0LjYxIDE5Ljc1LTI5LjU2YzExLjk3LTQuOTUzIDI1LjcyLTIuMjE5IDM0Ljg4IDYuOTM4bDE2MCAxNjBDNDQ0LjkgMjM5LjYgNDQ4IDI0Ny44IDQ0OCAyNTZ6Ii8+PHBhdGggY2xhc3M9ImZhLXNlY29uZGFyeSIgZD0iTTIyNCAzMjBIMzJjLTE3LjY3IDAtMzItMTQuMzMtMzItMzJWMjI0YzAtMTcuNjcgMTQuMzMtMzIgMzItMzJoMTkyVjMyMHoiLz48L3N2Zz4=);
  width: 1em;
  height: 1em;
  display: inline-block;
  background-size: 100%;
  position: relative;
  top: +4px;
  margin-right: 8px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

IT goldman0
Related