Html 想让 Font Awesome 图标可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26814297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Want to make Font Awesome icons clickable
提问by twhite96
So I am new to web development and I am trying to link font awesome icons to my social profiles but am unsure of how to do that. I tried using an a href tag but it made all of the icons take me to one site instead of the one I wanted. Here is the code:
所以我是 Web 开发的新手，我试图将字体真棒图标链接到我的社交个人资料，但我不确定如何做到这一点。我尝试使用 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>
I'd like for each of these icons to go to their respective profiles. Any suggestions?
我希望这些图标中的每一个都转到它们各自的配置文件中。有什么建议？
回答by shyammakwana.me
You can wrap those elements in anchor tag
您可以将这些元素包装在锚标记中
like this
像这样
<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>
Note: Replace hrefwith your desired link.
注意：替换href为您想要的链接。
回答by Neo M Hacker
If you don't want it to add it to a link, you can just enclose it within a span and that would work.
如果您不想将其添加到链接中，您可以将它包含在一个跨度内，这样就可以了。
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
in your css, then you can:
在你的 css 中，你可以：
#clickableAwesomeFont {
cursor: pointer
}
Then in java script, you can just add a click handler.
然后在java脚本中，你可以添加一个点击处理程序。
In cases where it's actually nota link, I think this is much cleaner and using a link would be changing its semantics and abusing its meaning.
在它实际上不是链接的情况下，我认为这更清晰，使用链接会改变其语义并滥用其含义。
回答by Puneeth Reddy V
Using bootstrap with font awesome.
使用带有字体的引导程序真棒。
<a class="btn btn-large btn-primary logout" href="#">
<i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>
回答by Ryan
I found this worked best for my usecase:
我发现这最适合我的用例：
<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>
回答by Eric D'Souza
In your css add a class:
在你的css中添加一个类：
.fa-clickable {
cursor:pointer;
outline:none;
}
Then add the class to the clickable fontawesome icons (also an id so you can differentiate the clicks):
然后将类添加到可点击的 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>
Then add a handler in your jQuery
然后在你的 jQuery 中添加一个处理程序
$(document).on("click", "i", function(){
switch (this.id) {
case "epd-dribble":
// do stuff
break;
// add additional cases
}
});
回答by Timilehin
<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>
