想要使Font Awesome图标可以点击

Question

所以我是网络开发的新手,我正在尝试将字体真棒图标链接到我的社交个人资料,但我不确定如何做到这一点.我尝试使用一个href标签,但它使所有图标将我带到一个网站而不是我想要的网站.这是代码:

 <i class="fa fa-dribbble fa-4x"></i>
 <i class="fa fa-behance-square fa-4x"></i>
 <i class="fa fa-linkedin-square fa-4x"></i>
 <i class="fa fa-twitter-square fa-4x"></i>
 <i class="fa fa-facebook-square fa-4x"></i>

我希望每个图标都可以转到各自的配置文件.有什么建议？

Answer 1

您可以将这些元素包装在锚标记中

像这样

<a href="your link here"> <i class="fa fa-dribbble fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-behance-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-linkedin-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-twitter-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a>

注意:替换href为您想要的链接.

Answer 2

如果您不希望它将其添加到链接中,您可以将其包含在一个范围内,这将起作用.

<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>

在你的CSS中,你可以:

#clickableAwesomeFont {
     cursor: pointer
}

然后在java脚本中,您只需添加一个单击处理程序.

在它实际上不是链接的情况下,我认为这更加清晰,并且使用链接将改变其语义并滥用其含义.

Answer 3

使用带有字体的bootstrap很棒.

<a class="btn btn-large btn-primary logout" href="#">
        <i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>

Answer 4

我发现这最适合我的用例：

<i class="btn btn-light fa fa-dribbble fa-4x" href="#"></i>
<i class="btn btn-light fa fa-behance-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-linkedin-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-twitter-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-facebook-square fa-4x" href="#"></i>