Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove incorrect bi from i usage #1845

Closed
wants to merge 3 commits into from
Closed

Remove incorrect bi from i usage #1845

wants to merge 3 commits into from

Conversation

fulldecent
Copy link

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

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

@XhmikosR no, no please see here

Screenshot 2023-11-01 at 17 42 49

@XhmikosR
Copy link
Member

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

@fulldecent
Copy link
Author

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