4

在新的 FontAwesome 4.0.0 中有用于堆叠项目的 css 样式。 

<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  width: 100%;
  text-align: center;
 }
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

.fa-square-o:before {
  content: "\f096";
}

在此处输入图像描述

我只想在不使用嵌套spanand的情况下这样做，只i使用一些 css-classes

.myclass1 { ... }
.myclass2 { ... }
<span class=".... myclass2" />

达到相同结果的最简单方法是什么（使用 fa 内容类？）

更新：或者是像下面这样的可能吗？

 .myclass1:before { content:     '<span class="fa-stack">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>' }

     <span class=".... myclass1" />
4

2 回答 2

4

（已编辑）

这对于类是不可能的fa-*，因为无法确定堆叠图标的顺序：在 CSSclass="foo bar"中与class="bar foo"

另一方面，您可以定义自己的类并为其设置样式以实现一个选择的堆叠图标- 即您需要每对都需要一个自定义类（例如fa-times堆叠在 上fa-square）。

为了实现这一点，使用:before和:after选择器（和绝对定位 -小演示）。

如果您使用绝对定位，似乎（使用background属性测试）该:after元素位于顶部。:before如果这不是真的，您 cvan 总是使用z-index手动订购这两个元素。

于 2013-10-25T13:22:08.767 回答
3

关于您的更新，如果可能出现以下情况？

.myclass1:before { 
   content:'<span class="fa-stack">
      <i class="fa fa-square-o fa-stack-2x"></i>
      <i class="fa fa-twitter fa-stack-1x"></i>
    </span>' 
}

<span class=".... myclass1" />

不是，正如那里解释的那样：CSS 内容属性：是否可以插入 HTML 而不是文本？

如果您想控制单个 HTML 标记中的两个堆叠图标，您可以通过类似的方式获得它。

div{
  display:flex;
  justify-content: center;
  position:relative;
}

i:before {
    content: attr(icon-before); // "\f099";
    position: absolute; 
    font-size: 1.5em;
    margin:0.1em;
}

i:after {
    content: attr(icon-after); // "\f096";
    position: absolute; 
    font-size: 2.1em;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/>
<!--https://stackoverflow.com/questions/22600464/html-special-characters-in-css-content-using-attr-->

<div><i class="fa" icon-before="&#xf099" icon-after="&#xf096"></i></div>

于 2016-11-08T16:18:46.613 回答