Bootstrap 5 SVG图标未显示

Question

Bootstrap 5 SVG图标未显示

4

我已经从Bootstrap官方文档示例中添加了页脚，但社交图标似乎没有出现。我已经添加了这些CDN：

<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<link href="//fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


 <div class="container">
  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
    <div class="col-md-4 d-flex align-items-center">
      <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
        <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
      </a>
      <span class="text-muted">© 2021 Company, Inc</span>
    </div>

    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"></use></svg></a></li>
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"></use></svg></a></li>
      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"></use></svg></a></li>
    </ul>
  </footer>
</div>

这是代码的一部分：

- mercury

1

你需要在 href 中添加一些代码。 <use xlink:href="`boostrap-icons.svg`#twitter"></use>。你可以在这里看到它是如何使用的。 - Infa

谢谢，我会阅读的，但是我是从 Bootstrap 网站上复制的。 - mercury

1

你正在调用 class="bi" 的类，但是缺少一些东西。请尝试添加这个类：class="bi bi-facebook"。 - Infa

我使用了另一种技术，我添加了 @import url('//cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css'); ，并添加了图标 <i class="bi-facebook" style="font-size: 2rem; color: cornflowerblue;"></i>。它可以正常工作。 - mercury

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ranjeet Sharma · Answer 1

所有图标现在都可以与Bootstrap稳定版本或更新版本正常使用。

谢谢

- MrUpsidown · Answer 2

为了能够使用SVG精灵，您需要将其包含并在<use>的xlink href中引用。请参见文档中的示例:

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

以上代码假设您拥有与包含代码的HTML文件相同位置的bootstrap-icons.svg文件。如果没有，请在href中适应路径。

您可以在此处获取SVG：https://github.com/twbs/icons/blob/main/bootstrap-icons.svg 如果您通过NPM安装了Bootstrap Icons，则可以在以下位置找到该文件：

node_modules/bootstrap-icons/bootstrap-icons.svg

- mercury · Answer 3

从Bootstrap 5图标页面 Bootstrap图标

你必须从下面的img中复制其中一个：