<nav>
<ul>
<li><a href="#">Level 1 <i class="fa-solid fa-angle-right"></i></a></li>
<li><a href="#">Level 2 <i class="fa-solid fa-angle-right"></i></a></li>
<li><a href="#">Level 3 <i class="fa-solid fa-angle-right"></i></a></li>
<li><a href="#">Level 4 <i class="fa-solid fa-angle-right"></i></a></li>
<li class="active">Active</li>
</ul>
</nav>

.breadcrumbs-container nav ul {
  padding: 0;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 1px;
}

.breadcrumbs-container nav li {
  display: inline-block;
  list-style: none;
  margin-right: 20px;
  margin-bottom: 6px;
}
  
.breadcrumbs-container nav li a {
  display: inline-block;
  text-decoration: none;
  color: #999;
}
  
.breadcrumbs-container nav li a:hover {
  color: #EC9200;
  box-shadow: none;
}
  
.breadcrumbs-container nav li.active {
  display: inline-block;
  color: #999;
  padding: 4px 14px;
  border-radius: 4px;
} 
  
.breadcrumbs-container nav li i {
  display: inline-block;
  padding: 0 10px 0 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">