Unsorted icon stack using bootstrap-icons - html

Question

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?

Answer 1

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>