移动端Header按钮中Font Awesome图标显示异常求助

问题分析 #

你的自定义电话按钮在桌面端显示正常，但移动端出现双电话图标+“call”冗余文字，核心原因是当前主题针对移动端的tel:链接做了自动增强处理（比如通过CSS伪元素添加额外图标和文字），和你手动添加的Font Awesome图标产生了冲突。

解决方案 #

1. 用CSS隐藏主题自动生成的伪元素

打开浏览器开发者工具（按F12），切换到移动端视图，检查按钮元素是否存在::before/::after伪元素（这通常是主题自动添加的图标和文字来源）。确认后，将以下代码添加到站点的“Additional CSS”中：

/* 移动端隐藏主题自动生成的电话图标与冗余文字 */
@media (max-width: 768px) {
  .button2::before, .button2::after {
    display: none !important;
  }
}

如果上述代码无效，可替换为更精准的选择器（比如结合按钮所在的Header Widget容器类，例如.header-widget-area .button2），提升样式优先级。

2. 优化自定义按钮代码（可选，增强兼容性）

• 修正tel:链接格式（去掉空格，避免潜在解析问题）
• 使用Font Awesome 5标准的solid类（fas）替换旧的fa类
• 添加独特类名进一步隔离主题样式影响

修改后的HTML代码：

<a class="button2 custom-call-btn" title="Call Now" href="tel:0734974920">
  <i class="fas fa-phone-alt" aria-hidden="true"></i> 07 3497 4920
</a>

对应的增强CSS：

@media (max-width: 768px) {
  .custom-call-btn::before, .custom-call-btn::after {
    display: none !important;
  }
  /* 确保自定义图标正常显示 */
  .custom-call-btn i {
    display: inline-block !important;
    margin-right: 0.5rem;
  }
}

3. 排查主题内置设置

部分主题在移动端会自动启用内置的联系按钮功能，检查主题的Header设置或移动端优化选项，看是否有“显示电话按钮”类的开关，关闭后即可避免与自定义按钮的冲突。

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