Html 链接和图标之间的空间，超赞
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27969485/
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
Space between link and icon, fontawesome
提问by Joe
What's the best way to get a space between the link/paragraph and the icon?
在链接/段落和图标之间获得空格的最佳方法是什么？
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>Doesn't work to just put a space before the text because it will be changed back when you minify/uglify the project.
仅在文本前放置一个空格是行不通的，因为当您缩小/丑化项目时，它会被改回来。
I tried with all kinds of padding and margins. Can't get them to separate.
我尝试了各种填充和边距。不能让他们分开。
回答by Christina
I would use the .fa-fwclass. For example: <i class="fa fa-cog fa-fw">This adds a visual space (that won't get stripped out) and it's consistent, so when/if the elements stack it looks a lot better.
我会使用这个.fa-fw类。例如：<i class="fa fa-cog fa-fw">这增加了一个视觉空间（不会被剥离）并且它是一致的，所以当/如果元素堆叠它看起来好多了。
Instructions: http://fortawesome.github.io/Font-Awesome/examples/
回答by user2019037
Don't know if is the best but you can add some margin-rightto the ielement:
不知道是否是最好的，但您可以margin-right在i元素中添加一些：
i {
margin-right: 10px;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>回答by sodawillow
I guess iis display: inlineso you'll have to set its displayto inline-blockfor margin-rightto work :
我想i是display: inline这样你必须将其display设置inline-block为margin-right工作：
i {
display: inline-block;
margin-right: 1em;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>回答by Eduard
Old question but I didn't liked any of these answers so I did it this way:
老问题，但我不喜欢这些答案中的任何一个，所以我这样做了：
<i class="fa fa-cloud"></i> <span class="ml-1">Resume</span>
I kinda hate CSS or dirty html and I prefer working only with classes but fa-fwisn't useful with some icons. Not sure if span is the way to go but it looks good in my project.
我有点讨厌 CSS 或脏 html，我更喜欢只使用类，但fa-fw对某些图标没有用。不确定 span 是否可行，但在我的项目中看起来不错。
So you can just wrap your text around something and give it a margin in which direction you want.
因此，您可以将文本包裹在某物周围，并在您想要的方向上留出边距。
回答by Christoph Farnleitner
Since I just came across the same question I took a closer look at Christina's suggestion from the font-awesome example page (sorry, I'm not allowed to just comment yet).
因为我刚刚遇到了同样的问题，所以我从 font-awesome 示例页面中仔细查看了 Christina 的建议（抱歉，我还不能发表评论）。
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
The most distance here is gained by (see screen 1) rather than from fa-fwsee screen 2since this is just unifying the width of the font-icon itself, so for a nicer look you may want to go for both.
这里的最大距离是通过 （参见屏幕 1）而不是从fa-fw屏幕 2 获得的，因为这只是统一了字体图标本身的宽度，因此为了更好的外观，您可能想要两者都使用。
(which will be interpreted as a space then) also should not make any troubles while minifying based on some quick tests.
（然后将被解释为空格）在基于一些快速测试进行缩小时也不应该造成任何麻烦。
回答by Rafiqul Islam
Just use this:
只需使用这个：
a > i{
padding-right:10px;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply "></i>Change</a>回答by Vijayanand Settin
None of the answers here worked for me. I had to do this:
这里没有一个答案对我有用。我不得不这样做：
<i class="fa fa-reply"><span>Change</span></i>
i span {
display: inline-block;
margin-left: 0.3rem;
}
回答by Harshit Pant
There are 2 spaces you need to add to make the UI look good. First, before the icon and a little space in between the icon and the text field.
您需要添加 2 个空格以使 UI 看起来不错。首先，在图标之前和图标和文本字段之间的一点空间。
So for the first case you need to add a font awesome class
因此，对于第一种情况，您需要添加一个很棒的字体类
fa-fw
飞飞
class. for the second case, we just need a Non-Breaking Space.
班级。对于第二种情况，我们只需要一个Non-Breaking Space。
 
This way you will not need an extra class to be added.
这样你就不需要添加额外的类了。
Below is a sample code to explain this.
下面是一个示例代码来解释这一点。
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
回答by ahmed
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply" style="padding-right:5px"></i>Change</a>
you can do inner css after -class="fa fa-reply"- put -style="padding-right:5px"-
你可以在 -class="fa fa-reply"- put -style="padding-right:5px"- 之后做内部 css-
note: if you doing more then one icon type the padding size will be different by 1 or -1 px
注意：如果你做了一个以上的图标类型，填充大小将相差 1 或 -1 像素
or just put a space before the word like this
或者像这样在单词前放一个空格
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css" rel="stylesheet">
<a href="#/upgrade/selection"><i class="fa fa-reply"></i> Change</a>
