twitter-bootstrap 如何在引导程序中的文本和图标之间插入空格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33968025/
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 to insert space between text and icon in bootstrap?
提问by hmahdavi
I use of bootstrap in my website .When I add glyphicon glyphicon-userclass to the a tags icons appear with out any space .Please advice
我在我的网站中使用了引导程序。当我将glyphicon glyphicon-user类添加到 a 标签图标时，没有任何空格。请建议
<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="???????" class="glyphicon glyphicon-user" rel="nofollow" >???????</a>
回答by John Louie Dela Cruz
Put between the text and icon.
放在 文本和图标之间。
Example:
例子：
<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="???????" rel="nofollow" >
??????? <span class="glyphicon glyphicon-user"></span>
</a>
A whitespace will do also
空格也可以
<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="???????" rel="nofollow" >
??????? <span class="glyphicon glyphicon-user"></span>
</a>
EDIT:
编辑：
As your comment below that you can't add additional tags inside the atag, you can actually add an or a whitespace but using your code, the icon is placed on the left not on the right as the image shows.
正如您在下面的评论中不能在标签内添加其他标签一样a，您实际上可以添加一个 或一个空格，但使用您的代码，图标位于左侧而不是右侧，如图所示。
Using your code add an or a whitespace before the text but the icon is on the left.
使用您的代码 在文本前添加一个或一个空格，但图标在左侧。
<a style="padding-left: 10px; padding-right: 10px; border-left-width: 10px; border-left-style: solid; margin-left: 10px;" id="dnn_dnnUser_enhancedRegisterLink" title="???????" class="glyphicon glyphicon-user" rel="nofollow" > ???????</a>
回答by user3590235
Assuming the text is to the left, how about adding style="padding-left:10px" to your span?
假设文本在左边，那么在你的跨度中添加 style="padding-left:10px" 怎么样？
<p>Envelope icon as a link:
<a href="#">
<span style="padding-left:10px" class="glyphicon glyphicon-envelope"></span>
</a>
</p>
回答by Tarun Dugar
Add two spans inside the anchor tag, one for holding your text, and one for the glyphicon:
在锚标记内添加两个跨度，一个用于保存文本，另一个用于字形：
<a>
<span class="glyphicon glyphicon-user" style="margin-right: 10px"></span>
<span>your text</span>
</a>
