Question

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

话虽如此，由于我们只使用小图标，因此我已将其垂直居中。我一直在试着这一点，这就是我想出的：

@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标记旁边（.fa + *伪类也失败），:only-child将适用，如：

<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 ：我想在包含类5px的任何标记与其后的任何标记之间添加.fa边距，包括纯文本

〜提前致谢〜

Answer 1

如评论中所述，问题是CSS不以纯文本为目标。这是一个死胡同。

但是，我们可以使用基于HTML空白折叠的技巧。如果最后按钮内有空格，浏览器会将其视为不存在。换句话说，<i>之前</button>之后的空格将被忽略。

因此，解决方案是在.fa::after中添加一个空格这仅在.fa本身是内联元素时才有效，否则该空格将被忽略，因此我们必须更改其display值，并且我们可能不得不在其他方面摆弄它保证金正确。

在这个例子中，我尽可能地减少了所有边距和填充，所以当只有图标时，你可以看到按钮中没有空格，只有当它还有纯文本时

＆＃13;

/* 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:"\1F4BE"}

/* 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:' '}

＆＃13;

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

＆＃13;

在Font Awesome图标

1 个答案: