[分享]css3打电话图标

CSS3 打电话图标是一个非常实用的图标，因为它可以让用户以最简单的方式联系卖家或者客服人员。借助 CSS3 打电话图标，用户可以远离繁琐的依赖第三方语音通讯 APP。以下是 CSS3 打电话图标的具...

CSS3 打电话图标是一个非常实用的图标，因为它可以让用户以最简单的方式联系卖家或者客服人员。借助 CSS3 打电话图标，用户可以远离繁琐的依赖第三方语音通讯 APP。以下是 CSS3 打电话图标的具体实现方法。

.icon-phone {
  display: inline-block;
  margin: 0 5px;
  width: 16px;
  height: 16px;
  background: url('phone.svg') no-repeat;
  background-size: cover;
}

.icon-phone:hover {
  transform: scale(1.2);
} 

在上述代码中，我们首先定义了一个无序列表，用于显示打电话图标，CSS 属性如下：

<ul>
  <li><i class="icon-phone"></i>400-***888</li>
  <li><i class="icon-phone"></i>13988888888</li>
</ul> 

上述代码中我们利用 i 标签定义图标，避免了直接在 HTML 文件中放置 SVG 文件。我们把 SVG 文件转成用 CSS 可支持的格式，即使用 background-image 属性以及 no-repeat 参数来实现。

我们的打电话图标可以使用 Hover 效果，Hover 时图标实现缩放（scale）来提醒用户这是一个可交互的元素。Hover 效果实现代码如下：

.icon-phone:hover {
  transform: scale(1.2);
} 

总的来说，CSS3 打电话图标不仅实用，而且非常简单易学。