如何在网页中添加带图标的WhatsApp号码、邮箱及地址信息？

要实现这种不带图片的矢量图标联系信息，最常用的是字体图标库或内嵌SVG图标，下面是具体实现方法：

方法一：使用字体图标库（推荐） #

字体图标是矢量字体形式的图标，缩放不会模糊，加载效率也比图片高，主流的比如Font Awesome：

1. 引入图标库
   将图标库的CSS文件引入到网页的<head>标签中，可选择本地下载文件引入，或者使用官方提供的CDN方式。

2. 编写HTML结构
   用容器包裹每个联系项，通过<i>标签调用对应图标，示例代码：

<div class="contact-info">
  <!-- WhatsApp 联系项 -->
  <div class="contact-item">
    <i class="fa-brands fa-whatsapp"></i>
    <span>+123 456 7890</span>
  </div>
  <!-- 邮箱联系项 -->
  <div class="contact-item">
    <i class="fa-solid fa-envelope"></i>
    <a href="mailto:info@example.com">info@example.com</a>
  </div>
  <!-- 地址联系项 -->
  <div class="contact-item">
    <i class="fa-solid fa-location-dot"></i>
    <span>XX街道XX号XX大厦</span>
  </div>
</div>

• fa-brands对应品牌类图标，fa-solid对应实心风格图标，每个图标都有唯一类名，可根据图标库文档替换。
• 邮箱项使用mailto:协议，点击可直接唤起邮件客户端。

3. 添加CSS样式美化
   通过CSS调整布局、间距和颜色，让样式更贴合需求：

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 控制联系项的垂直间距 */
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文字的间距 */
  font-size: 16px;
  color: #333;
}

/* 自定义各图标颜色 */
.contact-item .fa-whatsapp {
  color: #25d366;
  font-size: 20px;
}

.contact-item .fa-envelope {
  color: #c71610;
  font-size: 20px;
}

.contact-item .fa-location-dot {
  color: #e67e22;
  font-size: 20px;
}

/* 邮箱链接样式 */
.contact-item a {
  color: #333;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

方法二：使用内嵌SVG图标 #

如果不想依赖第三方库，可以直接把SVG图标代码嵌入HTML中，同样是矢量格式，无需图片文件：

示例HTML结构：

<div class="contact-info">
  <div class="contact-item">
    <!-- WhatsApp SVG图标 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#25d366" viewBox="0 0 16 16">
      <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
    </svg>
    <span>+123 456 7890</span>
  </div>
  <div class="contact-item">
    <!-- 邮箱SVG图标 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#c71610" viewBox="0 0 16 16">
      <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
    </svg>
    <a href="mailto:info@example.com">info@example.com</a>
  </div>
  <div class="contact-item">
    <!-- 地址SVG图标 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#e67e22" viewBox="0 0 16 16">
      <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
    </svg>
    <span>XX街道XX号XX大厦</span>
  </div>
</div>

可直接通过SVG的width、height、fill属性调整大小和颜色，也能用CSS统一控制，样式代码和方法一的CSS通用。

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