looks like your example code don't work #39847

Andre-23889 · 2024-03-27T19:09:30Z

Andre-23889
Mar 27, 2024

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

This is the first time I've tried to import an icon from your project, so I'm probably doing something wrong,
I tried using the code you provide as an example for the "box-seam" icon. but the icon does not appear on the page.
I was able to use one of your icons just by downloading the svg, but I would like to understand how I can insert it with a link to your archive... as should happen in the example:

Reduced test cases

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">

    <!-- Example Code -->
    
        
    <a class="icon-link" href="#">
      <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
      Icon link
    </a>
    
      
    <!-- End Example Code -->
  </body>
</html>

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3

julien-deramond · 2024-03-28T06:31:23Z

julien-deramond
Mar 28, 2024
Maintainer

Hi @Andre-23889
I transformed your issue into a Q&A discussion.

This issue in the documentation is in the backlog somewhere, and I've even created some PRs recently to try to tackle it. Basically, we use SVG references to ease the maintenance of our documentation, but on the other hand, it can be difficult to get how it works for the users.

In your real-life project, you won't import https://getbootstrap.com/docs/5.3/assets/css/docs.css and instead you can do that:

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="box-seam" viewBox="0 0 1000 1000">
    <path fill-rule="evenodd" d="M824.958,125h-650a50,50,0,0,0-50,50V825a50,50,0,0,0,50,50h650a50.027,50.027,0,0,0,50.031-50l0.031-650A50.053,50.053,0,0,0,824.958,125ZM800.006,800H200.057l0.033-600H399.958V350l100-75,100.049,75V275l-0.014-75.033,200,0.033ZM599.958,575h50V675H725.02V575h49.938l-87.5-100Zm-150,100h75.031V575h49.969l-87.5-100-87.5,100h50V675Zm0,75h275V700h-275v50Z"/>
  </symbol>
</svg> 
<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
  Icon link
</a>

And you can replace the .bi by the following properties, for instance:

width="1rem" height="1rem" fill="currentcolor"

In the same spirit, you can embed the SVG directly within the <a> without reference:

<a class="icon-link" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">  
    <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
  </svg>
  Icon link
</a>

And they are other ways to include/install the Bootstrap icons described in https://icons.getbootstrap.com/#install.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

looks like your example code don't work #39847

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Bootstrap

looks like your example code don't work #39847

Andre-23889 Mar 27, 2024

Prerequisites

Describe the issue

Reduced test cases

What operating system(s) are you seeing the problem on?

What browser(s) are you seeing the problem on?

What version of Bootstrap are you using?

Replies: 1 comment

julien-deramond Mar 28, 2024 Maintainer

Andre-23889
Mar 27, 2024

julien-deramond
Mar 28, 2024
Maintainer