javascript - 使社交图标可点击

我一直在网上搜索一些说明，说明如何使社交图标可点击，但我似乎找不到答案。我喜欢在我的博客中添加一些带有以下代码的图标：

 .social-wrap {
          width: 325px;
          height: 50px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -25px 0 0 -162.5px;
        }
        .social-wrap button {
          border: none;
          outline: none;
          width: 50px;
          height: 50px;
          font-size: 1.25em;
          transition: color .25s ease-out, background .25s ease-out, border-radius .25s ease-out;
          box-shadow: 0px 27px 73px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap button:hover {
          cursor: pointer;
          border-radius: 50px;
          box-shadow: 0px 27px 45px -10px rgba(0, 0, 0, 0.75);
        }
        .social-wrap .facebook {
          color: #3b5998;
          background-color: #fff;
        }
        .social-wrap .facebook:hover {
          color: #fff;
          background-color: #3b5998;
        }
        .social-wrap .facebook:active {
          background-color: #fff;
          color: #3b5998;
        }
        .social-wrap .twitter {
          color: #00aced;
          background-color: #fff;
        }
        .social-wrap .twitter:hover {
          color: #fff;
          background-color: #00aced;
        }
        .social-wrap .twitter:active {
          background-color: #fff;
          color: #00aced;
        }
        .social-wrap .google-plus {
          color: #dd4b39;
          background-color: #fff;
        }
        .social-wrap .google-plus:hover {
          color: #fff;
          background-color: #dd4b39;
        }
        .social-wrap .google-plus:active {
          background-color: #fff;
          color: #dd4b39;
        }

  <div class='social-wrap'>
    <button class='facebook'>
      <i class='fa fa-facebook'></i>
    </button>
    <button class='twitter'>
      <i class='fa fa-twitter'></i>
    </button>
    <button class='google-plus'>
      <i class='fa fa-google-plus'></i>
    </button>
 </div>
            

如何使其可点击？我尝试插入按钮标签，但它给我一些错误“ Illegal nesting: nesting within plain text is illegal.”。请给我一些想法。 TIA

最佳答案

您应该能够将href属性设置为相应链接的<i>标签包裹在<a>标签中：

<a href="your-link-here">
    <i class='fa fa-facebook'></i>
</a>

您甚至可以将按钮包装在<a>标记中（如果需要它们也可以单击）。

关于javascript - 使社交图标可点击，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51664737/