Question

我想在另一个图标中添加一些文字。这是我的尝试：

  <!-- 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

Larsi

Answer 1

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

像这样的东西（我从我的评论中分出了小提琴，并为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>

或5x：

<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>

将文本放在fontawesome图标内

1 个答案: