我摆弄了你的代码，发现：

• 主span（类.unsorted）必须使用overflow: hidden剪切多余的字符间距
• line-height已通过 * bootstrap * 为图标设置为1。
• 默认情况下，* bootstrap * 图标有vertical-align: -0.125rem，这会导致图标略微上移。我通过将图标（<i>）设为display: grid来规避这一点，这样也可以将字符很好地定位在.unsorted中。
• 字符的合理上/下偏移量似乎是27.35%。

此外，我还引入了一些CSS自定义属性来测试组合字符的各种大小：sm, md, xl.
我对 * bootstrap * 知之甚少，无法使用它，所以我创建了一个普通的CSS解决方案，它似乎可以与您的 * bootstrap * 代码一起工作。

• • 片段**

/* * { 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>