Skip to content

Remove incorrect bi from i usage#1845

Closed
fulldecent wants to merge 3 commits intotwbs:mainfrom
fulldecent:patch-1
Closed

Remove incorrect bi from i usage#1845
fulldecent wants to merge 3 commits intotwbs:mainfrom
fulldecent:patch-1

Conversation

@fulldecent
Copy link
Copy Markdown

@fulldecent fulldecent commented Oct 31, 2023 •
edited
Loading

This PR removes the extra bi in the <i> usage examples:

- <i class="bi bi-%s"></i>
+ <i class="bi-%s"></i>

Documentation on the main page says to use <i class="bi-alarm"></i> which does not have bi. But documentation on the inner pages adds an extra bi.

This is a problem because using the extra bi in this scenario causes a layout problem.

Minified test case showing the problem with extra bi:

https://stackblitz.com/edit/zjw8ha?file=index.html

<!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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
    <title>Layout issue</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" integrity="sha256-2IJPcGfN/qOK/sfp/68HISUmaCQgbWnvHxEtchU6UF4=" crossorigin="anonymous">
  </head>
  <body class="p-5">
    <p>
      <a class="icon-link"><i class="bi-receipt"></i> Correct</a>
    </p>

    <p>
      <a class="icon-link"><i class="bi bi-receipt"></i> Incorrect</a>
    </p>
  </body>
</html>

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Nov 1, 2023

@mdo I'll defer this to you

@XhmikosR XhmikosR requested a review from mdo November 1, 2023 05:56
@XhmikosR XhmikosR added the docs Improvements or additions to documentation label Nov 1, 2023
@fulldecent
Copy link
Copy Markdown
Author

fulldecent commented Nov 1, 2023

Now I see that documentation published at https://icons.getbootstrap.com/ uses exclusively

<i class="bi-

but documentation in https://github.com/twbs/icons/blob/main/docs/content/_index.md uses both

<i class="bi bi-heart-fill"></i>

and

<i class="bi-alarm-clock">

So this is definitely above my pay grade.

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Nov 1, 2023

Ah that's the markup for the docs not the rendered one.

@XhmikosR XhmikosR closed this Nov 1, 2023
@fulldecent
Copy link
Copy Markdown
Author

fulldecent commented Nov 1, 2023

@XhmikosR no, no please see here

Screenshot 2023-11-01 at 17 42 49

@XhmikosR
Copy link
Copy Markdown
Member

XhmikosR commented Nov 21, 2023

What you see in your screenshot is the correct result, there's nothing to change here.

@fulldecent
Copy link
Copy Markdown
Author

fulldecent commented Nov 22, 2023

Okay, I moved this back to an issue to more clearly illustrate the problem

#1878

@fulldecent fulldecent mentioned this pull request Nov 22, 2023
Closed
@fulldecent fulldecent mentioned this pull request Jan 9, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mdo mdo Awaiting requested review from mdo

Assignees

@mdo mdo

Labels

docs Improvements or additions to documentation

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@fulldecent @XhmikosR @mdo