HTML
分享按钮
代码 fa
分享功能是现代网站设计中常见的
一个需求,这里介绍一种使用 Font Awesome(fa)图标库实现
分享按钮
功能的
方法。
首先,在 HTML 文档的 head 部分引用 Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-xxaTOg9Q2oqbZ6T4e6VweoNx53uLSw1+mOTpRXPv7VJp4c0U+VweG4sU2aXP3o+" crossorigin="anonymous">
然后,在需要
显示分享按钮的位置插入以下
代码段:
<div class="share">
<a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
</div>
其中,div 的 class 为 share,是为了给 CSS 样式提供钩子;a
标签的 class 分别为 facebook、twitter 和 linkedin,是为了后续的 CSS 样式区分不同的
分享按钮;i
标签应用了 Font Awesome 的图标。
最后,为
分享按钮
添加样式。这里提供
一个简单的样式参考:
.share a {
margin-right: 10px;
transition: 0.3s;
}
.share a:hover {
transform: scale(1.2);
}
.share .facebook {
color: #3b5998;
}
.share .twitter {
color: #1da1f2;
}
.share .linkedin {
color: #0077b5;
}
这是只
一个简单的样式,开发者可以根据自己的需要
添加更多的样式
属性,以实现不同的按钮
效果。
以上就是
一个简单的使用 Font Awesome(fa)库实现
分享按钮
功能的
方法。通过使用字体图标,在不
增加图片 HTTP 请求的前提下实现图标的
显示,这是一种很好的
性能优化方式。