Search code examples
csstwitter-bootstrapbootstrap-4font-awesome-5

FontAwesome Pro icons and Bootstrap 4 breadcrumbs

This has been asked many times before, but nothing I'm seeing as an answer is working, e.g. Bootstrap modify breadcrumb with fontawesome icon separator with SASS

I'm using Font Awesome 5 Pro (from their own CDN, kit.fontawesome.com) and Bootstrap 4.0.0

I want to change the default Bootstrap 4 breadcrumb separator to a FontAwesome icon.

I have the following markup:

<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>

If I apply any of the answers given, it doesn't render correctly. I get a "square".

I'm using the unicode f061 which should be the "right arrow" shown here: https://fontawesome.com/icons/arrow-right

Examples -

.breadcrumb-item + .breadcrumb-item::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f061";
}

enter image description here

.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f061";
    font-weight: 900;
}

enter image description here

Edit - it's working fine for rendering icons inside the document, e.g. <i class="fas fa-arrow-right"></i> will work. It's only when I'm trying to reference it in the CSS it's not showing the icon. There are no 404 errors or issues loading resources.

Why isn't this working?

Solution

  • you have use bolder right arrow so you have to add font-weight:900.

    follow the snippet code of my answer it works perfectly.

    .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f061";
}
    <!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://kit.fontawesome.com/a35ed2bddb.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <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>
</body>
</html>