HTML和CSS中的社交媒体图标

Question

我的设计下面有一些社交媒体图标（LinkedIn，Facebook，Google Plus，Twitter），我试图在HTML和CSS中复制。

此时此刻，我能够在fiddle中使用font-awesome获取此内容，但它的设计并不相同。

我想知道，有什么方法在字体 - 真棒我们可以复制上述设计？如果在font-awesome中不可能，那么我们可以通过其他库复制上述设计吗？

我用于每个社交媒体图标的小提琴中的HTML代码是：

<li class="navbar-icons">
  <a href="" target="_blank">
    <i class="fa fa-linkedin-square fa-6" aria-hidden="true"></i>
  </a>
</li>

Answer 1

由于你正在使用Font Awesome，结果会有不同的设计，因为该解决方案的目的是提供图标，而不是你真正想要的那种按钮。

如果您想保持每个社交媒体平台的风格，您应该浏览相应的文档。

微博

如Twitter docs所述，您应首先添加以下代码段

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

然后添加Twitter for Websites JavaScript，它处理按钮的样式，并将href属性中的URL更改为您需要的URL。

谷歌+

docs提供的最简单按钮如下

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plus action="share" href="https://www.example.com"></g:plus>

其中href属性包含要共享的网址。

Facebook和LinkedIn

两者（Facebook和LinkedIn）都有非常好用的生成器，可以生成您需要添加到HTML中的代码段。

Answer 2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>