我一直在网上搜索一些说明,说明如何使社交图标可点击,但我似乎找不到答案。我喜欢在我的博客中添加一些带有以下代码的图标:
.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/