2

I'm using bootstrap-icons, which does not yet have an "unsorted" icon like this:

So I'd like to stack two separate icons to achieve that effect:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">

<span class="d-inline-block position-relative" style="height: 1rem; width: 1rem;">
  <i class="bi bi-caret-up position-absolute" style="font-size: 1rem; top: -5px;"></i>
  <i class="bi bi-caret-down position-absolute" style="font-size: 1rem; top: 5px;"></i>
</span>

Run that code snippet, and open it in your browser's devtools - you'll notice the parent wrapper does not properly fit the contents. The parent <span> is smaller than the individual <i> icons. So when used in a table header cell (and other places too), it sometimes looks weird.

How could I fix this?

lonix
  • 14,255
  • 23
  • 85
  • 176

1 Answers1

2

I have fiddled with your code and learned that:

  • the main span (class .unsorted) has to clip excess character spacing with overflow: hidden
  • line-height is already set to 1 by bootstrap for icons.
  • by default bootstrap icons have vertical-align: -0.125rem causing a slight shift up. I circumvented this by making the icons (<i>) display: grid, which also positions the characters nicely inside .unsorted.
  • A reasonable up/down offset for the characters seems to be 27.35%.

Additionally I introduced a few CSS custom properties to test various sizes of the combined character: sm, md, xl.

I know too little of bootstrap to be any use with that, so I created a vanilla CSS solution that seems to work with your bootstrap code.

snippet

/* * { outline: 1px dashed } /* for debugging */

body {
    margin: 0;
    min-height: 100vh;
    display: grid; place-items: center;
}
.unsorted { background-color: rgb(128,128,128,.4) }


/********/
/* DEMO */
/********/
/* A few sizes to test variations */
.unsorted.sm { --button-size: 1em }
.unsorted.md { --button-size: 5em }
.unsorted.xl { --button-size: 9em }

.unsorted {
    overflow: hidden; /* [MANDATORY] */
    font-size: 1rem;

    height: var(--button-size);
    width : var(--button-size);

    --icon-offset: 27.35%;
}

.unsorted i {
    display: grid; /* centers the characters */
    font-size: var(--button-size);
}

/* up/down offset, made to use positive numbers */
.bi.bi-caret-up   { bottom: var(--icon-offset) }
.bi.bi-caret-down { top   : var(--icon-offset) }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">

<div>
    <span class="d-inline-block position-relative unsorted xl">
      <i class="bi bi-caret-up position-absolute"  ></i>
      <i class="bi bi-caret-down position-absolute"></i>
    </span>

    <span class="d-inline-block position-relative unsorted md">
      <i class="bi bi-caret-up position-absolute"  ></i>
      <i class="bi bi-caret-down position-absolute"></i>
    </span>

    <span class="d-inline-block position-relative unsorted sm">
      <i class="bi bi-caret-up position-absolute"  ></i>
      <i class="bi bi-caret-down position-absolute"></i>
    </span>
</div>
Rene van der Lende
  • 4,992
  • 2
  • 14
  • 25
  • 1
    Incredible solution, thanks Rene! – lonix Jan 04 '23 at 06:57
  • @lonix BTW, I just checked the Stackoverflow ' Answer Sorted by: ...' dropdown icon. It uses the `::before` and `::after` to create triangular borders for a similar icon. Maybe something for you to look into? – Rene van der Lende Jan 09 '23 at 03:34
  • Yes that's the "pure css" way of drawing triangles. But for now your solution is good enough... it's temporary until that icon is included in the bootstrap-icons library. – lonix Jan 09 '23 at 04:23