3

FontAwesome 3.2.1

我想仅使用 CSS 来使用令人敬畏的堆叠图标（一个放在另一个上的字体图标）。是否可以定义一些特殊的 CSS 规则的具体图标？

现在使用堆叠图标，因此 icon-check-empty 将显示在 icon-twitter 上。

<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>

我想定义 CSS 规则（myclass），以便我可以在一个跨度中使用它。

my.css
  icon-twitter-on-icon-check-empty {  } 
  .....


my.html
  <span class="icon-twitter-on-icon-check-empty" />
4

2 回答 2

1

如果我理解正确的话，当然。

您应该创建一个通用类来为您的图标和要添加的背景图像建立间距，然后创建一个链接或补充类来确定精灵的背景位置。

编辑：我没有意识到您实际上想要在彼此之上显示几个图标。那是非常不同的事情。你会想使用定位来做到这一点。

于 2013-08-17T22:30:40.393 回答
0

仅通过 CSS，这在 CSS 的前面有 Face Time 图标，在后面有红色的暂停。我正在使用此代码来覆盖 Web 主题，这就是为什么会有背景图像：无。

所以在你的CSS中：

.videoIcon {
    background-image:none!important;
    position:relative;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size:small;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
    .videoIcon:before {
    content: "\f03d";
    vertical-align: middle;
    position: absolute;
    left: 0;
}
    .videoIcon:after{
    content:"\f04c";
    position: absolute;
    right: 0;
    bottom:0;
    color:red;
    font-size:smaller;
}
于 2014-09-02T17:42:50.070 回答