我怎样才能像这样用图标放置 WhatsApp 号码、邮件和位置？

Question

[我的英文不太好，sorry] 这张照片是我从 https://icms.edu.pk/ 截取的。我想知道如何将这些 whatsapp、mail-us 和像这样的位置放在我的页面上。 有人可以帮我吗？

首先，我以为这些是图像，但它们不是。

Answer 1

他们正在使用图标库 - www.flaticon.com

Answer 2

检查这个网站

https://fontawesome.com/ 

一旦你登录（顺便说一句，它是免费的）。你会得到一个这样的脚本：

<script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script>

.add it to your head tag

然后搜索你需要的字体

获取图标的链接。

使用 CSS 属性自定义它

如果您需要澄清，请查看此

https://fontawesome.com/docs/web/add-icons/how-to

Answer 3

使用图标和电话号码使用

tel:<-- phone number -->

在锚标签内和邮件使用

mailto:<-- mail id -->

在锚标签内 或者你可以试试下面提到的例子：

index.html

   <div class="header-contact">
      <div id="phone-details" class="widget-text">
        <i class="fa-brands fa-whatsapp"></i>
        <div class="info-text">
          <a href="tel:[phone]">
            <span>WhatsApp</span> [phone]
          </a>
        </div>
      </div>
    </div>

这里是style.css

.header-contact .widget-text {
  position: relative;
  padding-left: 55px;
}
.header-contact .widget-text i {
  position: absolute;
  border-radius: 2px;
  text-align: center;
  left: 0;
  line-height: 40px;
  color: #003e78;
  font-size: 35px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  font-weight: 700;
}
.header-contact .widget-text .info-text a {
  color: #505050;
  font-weight: 400;
  font-size: 16px;
}
a {
  color: #D6F8D6;
  transition: all 0.3s ease 0s;
  text-decoration: none !important;
  outline: none !important;
}
.header-contact .widget-text .info-text span {
  display: block;
  font-weight: 700;
  color: #101010;
  line-height: 18px;
}

还有一个我可以使用字体很棒的图标