javascript - 使社交图标可点击

Question

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

 .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>
            

我怎样才能使它可点击？我尝试插入按钮标签，但它给了我一些错误“ 非法嵌套:在纯文本中嵌套是非法的。”。请给我一些想法如何去做。 TIA

Answer 1

您应该能够将 <i> 包裹起来标签 <a>将 href 属性设置为适当链接的标签:

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

您甚至可以将按钮包裹在 <a> 中标签(如果需要它们也可点击)。