如何将Bootstrap 3的Glyphicons适配为Bootstrap 5的FontAwesome？

Bootstrap 5 已移除内置的Glyphicons图标库，原Bootstrap3中依赖该库实现的单选按钮选中状态图标会失效，以下是适配FontAwesome的修改步骤：

1. 引入FontAwesome资源 #

在HTML页面的<head>中引入FontAwesome的样式文件（可使用本地资源或官方提供的资源包）。

2. 修改CSS代码 #

将原CSS中关联Glyphicons的部分替换为FontAwesome配置，同时适配Bootstrap5移除的radio-inline类：

• 替换字体族为FontAwesome的字体名称
• 替换图标编码为FontAwesome对应图标编码
• 添加Solid样式图标所需的font-weight: 900属性

修改后的CSS代码：

ul.chec-radio {
    margin: 15px;
}
ul.chec-radio li.pz {
    display: inline;
}
.chec-radio label.form-check-inline input[type="checkbox"] {
    display: none;
}
.chec-radio label.form-check-inline input[type="checkbox"]:checked+div {
    color: #fff;
    background-color: #000;
}
.chec-radio .form-check-inline .clab {
    cursor: pointer;
    background: #e7e7e7;
    padding: 7px 20px;
    text-align: center;
    text-transform: uppercase;
    color: #333;
    position: relative;
    height: 34px;
    float: left;
    margin: 0;
    margin-bottom: 5px;
}
.chec-radio label.form-check-inline input[type="checkbox"]:checked+div:before {
    content: "\f00c";
    margin-right: 5px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.chec-radio label.form-check-inline input[type="radio"] {
    display: none;
}
.chec-radio label.form-check-inline input[type="radio"]:checked+div {
    color: #fff;
    background-color: #000;
}
.chec-radio label.form-check-inline input[type="radio"]:checked+div:before {
    content: "\f00c";
    margin-right: 5px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

3. 调整HTML代码 #

将原HTML中的radio-inline类替换为Bootstrap5的form-check-inline类，同时修正同一单选组多个checked属性的错误（单选按钮同一name下仅能有一个选中状态）：

修改后的HTML代码：

<ul class="chec-radio">
    <li class="pz">
        <label class="form-check-inline">
            <input type="radio" id="pro-chx-residential" name="property_type" class="pro-chx" value="constructed">
            <div class="clab">Beginner</div>
        </label>
    </li>
    <li class="pz">
        <label class="form-check-inline">
            <input type="radio" id="pro-chx-commercial" name="property_type" class="pro-chx" value="unconstructed" checked>
            <div class="clab">Intermediate</div>
        </label>
    </li>
    <li class="pz">
        <label class="form-check-inline">
            <input type="radio" id="pro-chx-open" name="property_type" class="pro-chx" value="open_land">
            <div class="clab">Advanced</div>
        </label>
    </li>
</ul>

补充说明 #

• 原Glyphicons的\e013对勾图标，对应FontAwesome Solid样式的\f00c，若使用其他样式可替换对应编码和字体族
• 需确保FontAwesome资源引入正确，否则图标仍无法显示

内容的提问来源于stack exchange，提问作者J K