logo标签列表

FontAwesome Pro 图标和 Bootstrap 4 面包屑导航

csstwitter-bootstrapbootstrap-4font-awesome-5
4

这个问题已经被问了很多次，但是我看到的答案都没有起作用，例如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>

如果我使用任何给出的答案，它都无法正确呈现，只会显示一个“方块”。
我正在使用Unicode编码"f061"，应该是这里显示的“向右箭头”：https://fontawesome.com/icons/arrow-right 示例：
.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;
}

在这里输入图片描述

编辑 - 对于文档内的图标渲染，比如<i class="fas fa-arrow-right"></i>，是正常工作的。只有当我试图在CSS中引用它时，它才不显示图标。没有404错误或资源加载问题。

为什么不起作用？

你在CSS文件中定义了字体族Font Awesome 5 Pro，并且src有效吗？ - Lee
“定义”是什么意思？看一下这里发布的其他内容。它可以用于在文档内呈现图标。但是当我尝试在CSS中引用它时，它就不起作用了。我看到的所有答案都说font-family名称是“Font Awesome 5 Pro”，这很有道理，因为我们使用的是该版本（而不是免费版等）。 - Andy
实际上，它将在你链接的FA CSS文件中定义，所以忽略那个注释。如果你检查一下，那里的一切看起来都有效吗？ - Lee
我们要链接的文件是一个.js文件。它通过FontAwesome的控制面板提供。 - Andy
5个回答
2

你使用了粗体右箭头，因此需要添加 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>

有多少人没有阅读赏金说明？它说我们不是使用 .css 版本（而是 .js 版本），并且我们正在使用专业版，而不是免费版。我相信如果你使用完全不同于问题所询问的东西，它确实可以工作... - Andy
根据您的评论，我已经对我的答案进行了修改，您需要在图标CSS中添加字体加粗。请查看我的升级答案。谢谢。 - KuldipKoradia
这对我并没有实际起作用，但它帮助我缩小了问题范围。如果我用您提供的.js文件替换它，它就可以工作了。然而，当我链接到我自己的那个文件时，它却不行。这非常令人恼火，因为这是FontAwesome在他们的控制面板中提供给他们自己CDN上的文件的URL！我已经向您授予赏金，但除了联系FA询问之外，我仍然不确定他们提供的文件为什么不起作用。 - Andy
0

你能检查一下 computed 里的 Rendered Font，确保你的 CSS 没有被其他代码覆盖吗？

enter image description here

它没有显示FontAwesome。奇怪的是，如果我在HTML中使用实际的类，例如<i class="fas fa-arrow-right"></i>，则可以正确地呈现图标...但不会在渲染字体下显示该字体。我完全无法理解这一点！ - Andy
0
也许你缺少了实心类型的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';
这是托管在他们CDN上的版本。他们只提供一个链接到一个.js文件，该文件包含在<head>中。没有其他要导入/包含的文件。这正如他们自己网站上所描述的，所以肯定会起作用吧？ - Andy
正常实现是否有效？ - Phat Tran
是的，它在文档中呈现图标方面运行良好。只是当我试图在CSS中引用它时，它没有显示正确的图标。没有404错误或资源加载问题。 - Andy
0

你尝试使用 !important 了吗？

.breadcrumb-item + .breadcrumb-item:before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f061" !important;
    font-weight: 900;
}
你有项目链接吗？这样我们就可以直接查看问题了。 - Every Screamer
很遗憾，不行。它在私有域上，我无法创建一个 fiddle，因为我们从 FontAwesome 的 CDN 链接的 .js 必须与站点运行的域名绑定。 - Andy
哈哈，那可能真的是问题所在......因为这是私有域名......移除CDN，下载FontAwesome专业版包并在本地服务器上使用它......这样性能会更好，问题也应该会消失...... - Every Screamer
请阅读有关赏金的注释，您就会明白为什么这不是我们在这里寻找的答案。 - Andy
0

对于这个图标，您应该能够使用“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

我们正在使用 Font Awesome 5 Pro。据我所知，“Free”字体系列在这种情况下不起作用。根据我的问题，我尝试更新了font-family，但它仍然呈现为一个正方形。\很有趣，因为我不知道那是必需的。这可能是正确的方向，但对我没有起作用。 - Andy
你尝试过使用 font-family: 'Font Awesome\ 5 Pro'; 吗？ - Carol Skelly
是的，它仍然呈现出方块。 - Andy
你尝试过他们的支持吗？https://fontawesome.com/support 很难说没有能力重现，最有可能是与引用Pro字体和WOFF文件有关。此外，引用CDN上的“免费”集合（似乎工作正常）将是另一种解决问题的好方法，以确定是Pro集还是其他原因。 - Carol Skelly
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接