我想添加一些要堆叠在另一个图标内的文本。这是我的尝试:

  <!-- How should I style this to work properly with fa-1x and fa-5x ???? -->
  <span class="fa-stack fa-1x">
     <i class="fa fa-calendar-o fa-stack-2x"></i>
     <span class="fa fa-stack-1x">31</span>
  </span>

同时使用fa-1x和fa-5x时,有什么方法可以将其正确定位?

http://jsbin.com/opOwENe/3/edit

拉尔西

最佳答案

我认为最好为容器和文本创建一个不同的类。

这样的事情(我从评论中拨弄了 fiddle ,并为FontAwesome 4.0.3更新了:
http://jsfiddle.net/canuk/YzkWs/

  .calendar-stack {
        position: relative;
        display: inline-block;
        width: (13em / 14);
        height: 1em;

    .fa-calendar-o,
    .calendar-day {
        position: absolute;
    }

    .calendar-day {
        top: (7em / 8);
        left: (1em / 8);
        width: (11em / 8);
        height: (6em / 8);
        font-family: sans-serif;
        font-size: (8em / 14);
        font-weight: 700;
        line-height: (8em / 14);
        text-align: center;
      }
  }

然后,您的HTML如下所示:
<div class="calendar-stack">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">1</span>
</div>

或这个5倍:
<div class="calendar-stack fa-5x">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">3</span>
</div>

已针对4.3.x更新

的CSS
.calendar-stack {
    position: relative;
    display: inline-block;
    width: (13em / 14);
    height: 1em;

    .fa-calendar-o,
    .calendar-day {
        position: absolute;
    }

    .calendar-day {
        top: (7em / 8);
        left: (1em / 8);
        width: (11em / 8);
        height: (6em / 8);
        font-family: sans-serif;
        font-size: (8em / 14);
        font-weight: 700;
        line-height: (8em / 14);
        text-align: center;
    }
}

的HTML
<div class="calendar-stack fa-5x">
  <i class="fa fa-calendar-o"></i>
  <span class="calendar-day">3</span>
</div>

关于font-awesome - 在fontawesome图标中放置文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20411655/

10-12 12:45
查看更多