Html 如何向 fontawesome 图标及其下方的单词添加 href？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18560755/
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
How can I add an href to a fontawesome icon and word below it?
提问by Jbird
I created the following:
我创建了以下内容：
<div style="margin-top: 1.2em">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
</div>
Can someone tell me how I can make it so clicking on one of these icons or a word below it takes me to a link?
有人可以告诉我如何做到这一点，因此单击这些图标之一或下面的单词会将我带到链接？
What I would like to do is to make it so the icons appear like this:
我想做的是让图标看起来像这样：
xxxxxx xxxxxx xxxxxx
xxxxxx xxxxxx xxxxxx
xxxxxx xxxxxx xxxxxx
Home Admin Setting
So that when I click anywhere from the top of the icon to the bottom of the words below that this is the same as clicking in an:
因此，当我单击从图标顶部到下方文字底部的任何位置时，这与单击以下内容相同：
<a href="/home">Home</a>
<a href="/admin">Admin</a>
<a href="/setting">Setting</a>
link.
关联。
Update
更新
I believe maybe I need a solution that uses DIVs. I tried both answers given to me and both make the icons appear vertical. Also the second answer maybe is not idea as it has multiple hrefs for the same link. Hope someone can help out with another answer.
我相信也许我需要一个使用 DIV 的解决方案。我尝试了给我的两个答案，并且都使图标显示为垂直。同样，第二个答案可能并不理想，因为它对同一链接有多个 href。希望有人可以帮助提供另一个答案。
回答by Jbird
No divs necessary. Something like this should work. fiddle
不需要 div。像这样的事情应该有效。小提琴
<a href="/home" class="icon-block">
<i class="icon-home icon-4x"></i>
<span>Home</span>
</a>
<a href="/admin" class="icon-block">
<i class="icon-th icon-4x"></i>
<span>Admin</span>
</a>
<a href="/settings" class="icon-block">
<i class="icon-cog icon-4x"></i>
<span>Settings</span>
</a>
CSS
CSS
a.icon-block {
display:inline-block;
width:10em;
float:left;
text-align:center;
}
a.icon-block i,
a.icon-block span {
display:block;
width:100%;
clear:both;
}
回答by Thought Space Designs
Try:
尝试：
<div style="margin-top: 1.2em">
<a href="/home">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
<br />
<span class="normal">Home</span>
</a>
<a href="/admin">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
<br />
<span class="normal">Admin</span>
</a>
<a href="/setting">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
<br />
<span class="normal">Setting</span>
</a>
</div>
And then in your css, give the .normal class a different font family
然后在你的 css 中，给 .normal 类一个不同的字体系列
.normal{
font-family: "Your Font";
}
回答by Kooki3
Try this Div version.
试试这个 Div 版本。
<div style="margin-top: 1.2em">
<div class="go-inline">
<div>
<a href="/home">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/home">
<span class="normal">Home</span>
</a>
</div>
</div>
<div class="go-inline">
<div>
<a href="/admin">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/admin">
<span class="normal">Admin</span>
</a>
</div>
</div>
<div class="go-inline">
<div>
<a href="/setting">
<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
</a>
</div>
<div class="go-middle">
<a href="/setting">
<span class="normal">Setting</span>
</a>
</div>
</div>
</div>
and css class
和 css 类
go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}
P/s. some css/div structure editing will be fine. Try to build it with your own style. =D
P/秒。一些 css/div 结构编辑会很好。尝试用你自己的风格来构建它。=D
