在 Font Awesome 图标之后设置明文样式

Question

我目前正在尝试对我们所有拉取中央字体样式表的网站执行全局更新，在此更新中，我希望它在 Font Awesome 提供的图标之间添加一些间距以及它后面的一些纯文本，以保持原始样式并使图标在该文本上垂直居中。

也就是说，由于我们只使用小图标，所以我已经让它垂直居中了。我已经尝试了一段时间，这就是我想出的：

@import "font-awesome-4.4.0/css/font-awesome.min.css";
.fa {
    color: inherit;
    vertical-align: middle;
    display: inline-block;
    line-height: inherit;
}

.fa:only-child {
    margin-top: -3px;
}

.fa + * {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

在大多数情况下它做得很好，但奇怪的是 .fa:only-child 规则将适用，而当图标标签放在纯文本旁边时 .fa + * 规则不适用喜欢：

<button><i class="fa fa-save"></i>SAVE</button>

但是如果图标标签放置在任何其他 html 标签旁边（也使 :only-child 伪 class 失败），则 .fa + * 将适用，例如：

<button><i class="fa fa-save"></i><span>SAVE</span></button>

但在这样做时，我需要更新每个页面以包含新标签（这可能需要数周时间）并且我需要更正这些 span 标签的样式以从父级继承所有内容。

我也尝试过 javascript 解决方案，但我真的不喜欢必须遍历每个 DOM 元素来寻找事件的事实，我也不喜欢它会添加动态内容后需要重新运行。

有没有办法不做上述任何一种情况就可以解决这个问题？

我还需要提供按钮不包含文本、仅包含图标的实例，例如：

<button><i class="fa fa-save"></i></button>

所以不幸的是我不能只给所有 .fa 个实例留出 5px 的边距。

tl;dr: I want to add 5px of margin in between any tag containing class .fa and whatever follows it, including plain text

~提前致谢~

Answer 1

如评论中所述，问题在于 CSS 不针对纯文本。所以这是一个死胡同。

但是，我们可以使用一个技巧，基于HTML 的白色space 崩溃。如果最后一个按钮里面有一个space，浏览器会认为它不存在。换句话说，</button> 之前 <i> 之后的 space 将被忽略。

因此，解决方案是在 .fa::after 中放置一个 space。
这仅在 .fa 本身是内联元素时才有效，否则 space 将在那里被忽略，因此我们必须将其 display 值改回来，并且我们可能必须 fiddle 加上一些其他边距以使其正确。

在这个例子中，我尽可能地减少了所有的边距和填充，所以你可以看到只有图标时按钮中没有 space，只有当还有纯文本时才会出现。

/* emulate FontAwsome */
  .fa {display:inline-block;font:normal normal normal 14px/1 FontAwesome;
       font-size:inherit;text-rendering:auto;
       -webkit-font-smoothing:antialiased;
       -moz-osx-font-smoothing:grayscale}
  .fa-save:before,.fa-floppy-o:before {content:"F4BE"}

/* Added by me */
  button {border:4px outset rgba(128,128,128,.7); padding:0; font-size:20px;}
  button::-moz-focus-inner {padding: 0; border: 0}
  button .fa {display:inline;}
  button .fa:after {content:' '}

<button><i class="fa fa-save"></i></button>
<button><i class="fa fa-save"></i>Save</button>

在 Font Awesome 图标之后设置明文样式

Styling plaintext after Font Awesome icon

html

css

font-awesome