CMS环境下通过jQuery/JavaScript添加Font Awesome图标并设置手机号可点击

嘿，我来帮你搞定这个CMS页脚联系人的改造问题！先补全下你提到的HTML场景（假设你已经把第二个联系人的姓名和手机号添加进去了）：

...

李四

13900139000

接下来给你两种实现方案，按需选择：

如果你的项目已经引入了jQuery，这段代码直接就能用：

$(document).ready(function() {
  // 定位到第二个联系人的手机号元素，这里用示例选择器，你要根据实际结构调整
  const $phoneSpan = $('#agent-secondary span');
  const phoneNum = $phoneSpan.text().trim();

  // 1. 把手机号包装成可点击的tel链接
  $phoneSpan.wrap(`<a href="tel:${phoneNum}" class="secondary-agent-phone"></a>`);

  // 2. 在链接前插入Font Awesome电话图标
  $('.secondary-agent-phone').prepend('<i class="fa fa-phone" aria-hidden="true"></i> ');
});

小提示： #

• 确保网站已加载Font Awesome，如果CMS没自带，你可以通过它的「自定义代码」功能（一般在设置面板里）添加Font Awesome的资源（CMS通常会有专门区域允许插入这类外部资源，无需改核心HTML）
• 如果手机号的容器不是#agent-secondary span，打开浏览器开发者工具（F12），选中手机号元素复制它的选择器替换即可

不想依赖jQuery的话，原生JS同样能完成任务，兼容性拉满：

document.addEventListener('DOMContentLoaded', function() {
  // 定位手机号元素，替换成你实际的选择器
  const phoneSpan = document.querySelector('#agent-secondary span');
  if (!phoneSpan) return; // 防止找不到元素报错

  const phoneNum = phoneSpan.textContent.trim();

  // 创建tel链接元素
  const phoneLink = document.createElement('a');
  phoneLink.href = `tel:${phoneNum}`;
  phoneLink.className = 'secondary-agent-phone';

  // 创建Font Awesome图标元素
  const phoneIcon = document.createElement('i');
  phoneIcon.className = 'fa fa-phone';
  phoneIcon.setAttribute('aria-hidden', 'true');

  // 组装图标和手机号，替换原元素
  phoneLink.appendChild(phoneIcon);
  phoneLink.appendChild(document.createTextNode(` ${phoneNum}`));
  phoneSpan.parentNode.replaceChild(phoneLink, phoneSpan);
});

如果图标和手机号间距太近，或者想调整样式，可以通过CMS的自定义CSS功能加这段代码：

.secondary-agent-phone .fa-phone {
  margin-right: 6px;
  color: #2c3e50; /* 换成你的品牌颜色 */
}
.secondary-agent-phone {
  text-decoration: none;
  color: inherit;
}
.secondary-agent-phone:hover {
  text-decoration: underline;
}

关键注意点： #

• 核心是选对手机号元素的选择器，一定要用开发者工具确认你添加的手机号对应的HTML元素，别选错了
• 如果你的CMS是动态加载内容（比如滚动加载、延迟渲染），可以把代码放在setTimeout里延迟执行，或者监听CMS的内容加载完成事件，确保元素已经存在再操作

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