Html 如何在引导程序中将 <a> 链接添加到图标?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18566608/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:55:36  来源:igfitidea点击:

How do I add an <a> link to an icon in bootstrap?

htmlcsstwitter-bootstraptwitter-bootstrap-3

提问by Nitesh

I have the following:

我有以下几点:

<a href="http://www.website.com" title="Website name">Website Link</a>

and

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>

Can someone explain to me how I can combine these in bootstrap with font awesome icons that I am using. Do I put the <a>inside the <i>or the <i>inside the <a>or do the both need to be inside a <div>?

有人可以向我解释如何将引导程序中的这些与我正在使用的字体真棒图标结合起来。我是把<a>里面的<i>还是<i>里面的<a>还是都需要放在里面<div>

回答by Nitesh

Put the <i>inside the <a>

<i>里面的<a>

For Instance,

例如,

<a href="http://www.website.com" title="Website name"><i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a>

回答by Rituraj ratan

With this, only the icon will show:

这样,只有图标会显示:

<i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>

With this, a text link will be displayed:

这样,将显示一个文本链接:

<a href="http://www.website.com" title="Website name">Website Link</a>

If you want to display the text and icon with them both being a link then use the following, which puts the itag inside the atag:

如果要显示文本和图标,并且它们都是链接,请使用以下内容,将i标签放在标签内a

<a href="http://www.website.com" title="Website name"> <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>Website Link</a>