CSS 选择器未正确定位单选按钮的选中状态。 :checked 伪类仅直接应用于输入，而不应用于标签。
要解决此问题，您需要根据相应无线电输入的状态设置标签样式：
.add_task_radio {
display: none;
}
/* Default state: bi-check-circle is hidden, bi-circle is visible */
.add_task_radio_icon .bi-check-circle {
display: none;
}
.add_task_radio_icon .bi-circle {
display: inline;
}
/* When the radio button is checked, show the check-circle */
.add_task_radio:checked + .add_task_radio_icon .bi-check-circle {
display: inline;
}
.add_task_radio:checked + .add_task_radio_icon .bi-circle {
display: none;
}<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="add_task_container">
<input class="add_task_radio" type="radio" name="prior" id="prior-1" value="1">
<label class="add_task_radio_icon" for="prior-1" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
<input class="add_task_radio" type="radio" name="prior" id="prior-2" value="2">
<label class="add_task_radio_icon" for="prior-2" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
<input type="text" name="task_name" placeholder="Name">
</div>
</body>
</html>