Skip to content

Misalignment with .bi and .icon-link #41432

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
Open
fulldecent opened this issue Jan 9, 2024 · 1 comment
Open

Misalignment with .bi and .icon-link #41432

fulldecent opened this issue Jan 9, 2024 · 1 comment
Labels
css v5

Comments

@fulldecent
Copy link
Contributor

Screenshot 2024-01-09 at 08 41 17

This extracts an issue from my earlier issue twbs/icons#1845

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <title>Layout issue</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>
@Abhisek-Chowdhury-19
Copy link

Hi @mdo There is a issue with the line-height in the css i am also facing the same issue if any one is not working i would like to work on this.

@mdo mdo transferred this issue from twbs/icons May 3, 2025
@julien-deramond julien-deramond changed the title mis alignment with icon-link Misalignment with .bi and .icon-link May 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css v5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fulldecent @julien-deramond @Abhisek-Chowdhury-19