使用CSS实现Tooltip时Font Awesome图标完全不显示如何解决

问题解决方案 #

图标不显示的核心原因是你引入的是Font Awesome 6.x版本，该版本对图标类名做了不兼容更新，你使用的v4/v5版本的fa fa-info-circle类名在6.x版本中已失效，和你编写的tooltip相关CSS代码无关。

修复方法：

• 直接替换图标类名即可解决，将HTML中的<i class="fa fa-info-circle"></i>修改为<i class="fa-solid fa-circle-info"></i>，不需要改动原有tooltip的CSS逻辑。
• 可选优化：原有tooltip提示框设置了left: 50%，会出现提示框整体偏右的问题，可以在.tooltip .tooltiptext的CSS规则中增加transform: translateX(-50%)实现水平居中。
• 可选补充：可以给图标单独设置字体大小和颜色，避免和页面背景融合导致看不见，示例样式如下：

.tooltip i {
    font-size: 18px;
    color: #333;
    cursor: pointer;
}

修复后完整可运行代码：

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            background-color: transparent;
            border-width: 0px;
            margin: 0px;
            padding: 0px;
            float: none;
            z-index: 9999999
        }
        .tooltip i {
            font-size: 18px;
            color: #333;
            cursor: pointer;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 355px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 1s;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="tooltip">
         <i class="fa-solid fa-circle-info"></i>
         <span class="tooltiptext">Hello nice to meet u!</span>
    </div>
</body>

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