Question

以下是我所拥有的：

<a class="button">
    <i class="fa fa-times" />Some button label
</a>

其中<i class="fa fa-times" />是Font Awesome图标。

这会在文本旁边显示图标，两者之间没有任何空格。

我只是在margin-right元素中添加了i.fa，但现在我处于需要添加按钮而不用任何文本的位置，而且图标偏离中心。

我考虑i.fa + span将margin-left应用于文本，但这需要我将文本包装在span中（并且我的代码中包含了相当多的文本））。

我在React组件中这样做，我更喜欢只更新我的样式表来处理这个问题。如果没有CSS解决方案，那么我将编写一个Button组件来处理它。

是否有一个选择器允许我只选择那些文本与其相邻的i.fa，因此我可以应用margin-right并将它们分开一点？

Answer 1

我认为最好的选择是将文字包装在span标签中，如您所建议的那样。您无法使用CSS定位文本节点。

Answer 2

一切都没有丢失：https://jsfiddle.net/47L4ajgd/

＆＃13;

.fa {
  display: inline; /* NOT inline-block! */
}

i::after {
  content: ' '; /* the word spacing itself */
  font-size: 0px;
  word-spacing: 50px; /* set this instead of margin */
}

/* Some styling for demo */
.fa-times::before {
  content: "ICON"; /* Font Not-So-Awesome */
}

a {
  display: inline-block;
  border: 1px solid red;
  margin: 0 20px;
}

＆＃13;

<a class="button">
    <i class="fa fa-times"></i>Some button label
</a>
<a class="button">
    <i class="fa fa-times"></i>
</a>
<a class="button">
    Some button label
</a>

＆＃13;

是否有一个带有相邻文本的元素的CSS选择器？

2 个答案: