css 我怎么能把WhatsApp号码，邮件和位置像这样的图标？

wgmfuz8q 于 2023-02-26 发布在其他

关注(0)|答案(3)|浏览(111)

[my英语is not that good，sorry]这张照片是我从https://icms.edu.pk/拍的，我想知道我怎么把这些什么应用程序，邮件，我们和位置放在我的页面上，有人能帮我吗？
首先，我认为这些是图像，但它们不是。

css

来源：https://stackoverflow.com/questions/75552998/how-can-i-put-whatsapp-number-mail-and-location-like-this-with-icons

3条答案

按热度按时间

rdrgkggo1#

使用图标和电话号码使用tel:<-- phone number -->内的 * 锚标记 * 和邮件使用mailto:<-- mail id -->内的 * 锚标记 * 或您可以尝试下面提到的例子：

- 索引. 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:+92 333-9119145">
            <span>WhatsApp</span> +92 333-9119145
          </a>
        </div>
      </div>
    </div>

这是样式. 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;
}

这里还有一个可以使用fontawesome icons

赞(0）回复(0）举报 2023-02-26

b4lqfgs42#

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

赞(0）回复(0）举报 2023-02-26

gev0vcfq3#

查看此网站https://fontawesome.com/
一旦你登录（它免费的方式）.你会得到一个脚本像这样：<script src="https://kit.fontawesome.com/e1861f2b78.js" crossorigin="anonymous"></script> .将其添加到您的head标签
然后搜索所需字体
获取图标的链接。
使用CSS属性自定义它
检查这个，如果你需要澄清https://fontawesome.com/docs/web/add-icons/how-to

赞(0）回复(0）举报 2023-02-26

我来回答

css 我怎么能把WhatsApp号码，邮件和位置像这样的图标？

3条答案

相关问题

热门标签

最新问答