想让 Font Awesome 图标可点击答案

【问题标题】：Want to make Font Awesome icons clickable想让 Font Awesome 图标可点击
【发布时间】：2015-01-05 00:22:03
【问题描述】：

所以我是网络开发的新手，我正在尝试将字体很棒的图标链接到我的社交资料，但我不确定如何做到这一点。我尝试使用 a 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>

我希望这些图标中的每一个都转到各自的个人资料。有什么建议吗？

【问题讨论】：

标签： html font-awesome

【解决方案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="your link here" 替换为您想要的链接，例如href="https://www.stackoverflow.com".

【讨论】：

【解决方案2】：

如果您不希望将其添加到链接中，您只需将其包含在一个跨度内即可。

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

在你的 CSS 中，你可以：

#clickableAwesomeFont {
     cursor: pointer
}

然后在 java 脚本中，您可以添加一个点击处理程序。

如果它实际上是不是链接，我认为这更简洁，使用链接会改变其语义并滥用其含义。

【讨论】：

你有这方面的例子吗？它不适用于我的情况。

【解决方案3】：

使用带有字体的引导程序真棒。

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

Please use Like below.
<a style="cursor: pointer" **(click)="yourFunctionComponent()"** >
<i class="fa fa-dribbble fa-4x"></i>
 </a>

上面可以用来显示fa图标你可以编写你的逻辑的点击函数。

【讨论】：

【解决方案6】：

在你的css中添加一个类：

.fa-clickable {
    cursor:pointer;
    outline:none;
}

然后将类添加到可点击的 fontawesome 图标（也是一个 id，以便您可以区分点击）：

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

然后在你的 jQuery 中添加一个处理程序

$(document).on("click", "i", function(){
    switch (this.id) {
        case "epd-dribble":
            // do stuff
            break;
        // add additional cases
    }
});

【讨论】：

【解决方案7】：

             <a href="#"><i class="fab fa-facebook-square"></i></a> 
             <a href="#"><i class="fab fa-twitter-square"></i></a> 
             <a href="#"><i class="fas fa-basketball-ball"></i></a> 
             <a href="#"><i class="fab fa-google-plus-square"></i></a>


              All you have to do is wrap your font-awesome icon link in your HTML 
                               with an anchor tag.
        Following this format:
                   <a href="Link here"> <font-awesome icon code> </a>

【讨论】：

这对 2014 年给出的答案有何补充？