FontAwesome Pro 图标和 Bootstrap 4 个面包屑

Question

这个问题之前已经被问过很多次了，但是我没有看到任何有效的答案，例如Bootstrap modify breadcrumb with fontawesome icon separator with SASS

我正在使用 Font Awesome 5 Pro（来自他们自己的 CDN，kit.fontawesome.com）和 Bootstrap 4.0.0

我想将默认的 Bootstrap 4 面包屑分隔符更改为 FontAwesome 图标。

我有以下标记：

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

如果我应用给出的任何答案，它都不会正确呈现。我得到一个 "square".

我正在使用 unicode f061，它应该是此处显示的 "right arrow"：https://fontawesome.com/icons/arrow-right

示例 -

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

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

编辑 - 它可以很好地在文档中呈现图标，例如<i class="fas fa-arrow-right"></i> 会起作用。只有当我试图在 CSS 中引用它时它才不显示图标。没有 404 错误或加载资源问题。

为什么这不起作用？

Answer 1

也许您缺少 css 实体类型文件。这是我项目中的定义。

@import '../node_modules/@fortawesome/fontawesome-pro/scss/fontawesome.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/solid.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/light.scss';
@import '../node_modules/@fortawesome/fontawesome-pro/scss/regular.scss';

Answer 2

您能否检查计算中的 Rendered Font 以确保您的 css 不会被其他人覆盖

Answer 3

您尝试使用 !important 了吗？

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

Answer 4

对于此图标，您应该可以使用 "Font Awesome\ 5 Free" 系列。请注意，还需要 \ 和 font-weight...

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

https://www.codeply.com/go/aIGotMzZt4

Answer 5

您使用了更粗的右箭头，因此您必须添加 font-weight:900。

按照我的答案的代码片段，它完美地工作。

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

FontAwesome Pro 图标和 Bootstrap 4 个面包屑

FontAwesome Pro icons and Bootstrap 4 breadcrumbs

css

twitter-bootstrap

bootstrap-4

font-awesome-5