将Font Awesome图标用作按钮：解决图标过小、鼠标悬停消失问题

调整方案 #

1. 调大图标尺寸

Font Awesome提供了内置的尺寸类，直接给<i>标签添加对应类即可快速调整大小，可选类包括fa-sm/fa-lg/fa-2x/fa-3x，数字越大尺寸越大，也可以通过自定义CSS指定font-size属性做精细控制。

2. 修复悬停图标消失问题

该问题由Bootstrap btn-outline-secondary的默认悬停样式导致：默认悬停时会将按钮背景填充为secondary主题色，同时文字颜色变为白色，和背景色重叠导致看起来图标消失，自定义CSS覆盖该按钮的悬停样式即可解决。

3. 绑定onclick事件

直接在button标签上添加onclick属性绑定你的处理函数即可，上述修改不会影响点击事件触发。 #

完整修改后代码示例 #

<div class="row">
    <div class="col-md-5 mx-auto">
        <div class="input-group">
            <input class="form-control border-end-0 border rounded-pill" type="text" value="" id="example-text-input" >
            <span>
                <!-- 新增custom-search-btn类用于自定义样式，添加onclick属性绑定事件 -->
                <button class="btn btn-outline-secondary bg-white border-bottom-0 border rounded-pill ms-n5 custom-search-btn" type="button" onclick="yourClickHandler()">
                    <!-- 加fa-2x调整图标尺寸，可按需替换为其他尺寸类 -->
                    <i class="fas fa-arrow-alt-circle-right fa-2x"></i>
                </button>
            </span>
        </div>
    </div>
</div>

需要添加的CSS样式 #

/* 覆盖按钮默认悬停、聚焦、点击样式 */
.custom-search-btn:hover,
.custom-search-btn:focus,
.custom-search-btn:active {
    background-color: #fff !important;
    border-color: #6c757d !important;
    /* 可自定义图标悬停颜色，下方为深灰色，可按需调整 */
    color: #212529 !important;
    box-shadow: none !important;
}
/* 如果需要更精细控制图标大小，也可以单独给图标加样式 */
/* .custom-search-btn i {
    font-size: 24px;
} */

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