於 Fontawesome 圖示中加入文字

利用Fontawesome 可以透過HTML在圖示中加入文字.

利用DIV tag 及 CSS class fa-slack 將圖示以layer 形式顯示. 其中以class fa-text 輸入文字.

CSS

.calendar-text { margin-top: .3em; }
.file-text { margin-top: .2em; }


/* other styles for demo */
.fa-stack { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.stacked-icons {
  margin-top: 20px;
  text-align: center;
}
.fa-stack + .fa-stack { margin-left: .3em; }
.fa-stack { margin-bottom: 20px; }

HTML

<div class="stacked-icons">
  <span class="fa-stack fa-3x">
    <i class="fa fa-calendar-o fa-stack-2x"></i>
    <strong class="fa-stack-1x calendar-text">27</strong>
  </span>

  <span class="fa-stack fa-3x">
    <i class="fa fa-comment fa-stack-2x"></i>
    <strong class="fa-stack-1x fa-stack-text fa-inverse">OK</strong>
  </span>

  <span class="fa-stack">
    <i class="fa fa-file-o fa-stack-2x"></i>
    <i class="fa fa-check fa-stack-1x"></i>
  </span>
  <span class="fa-stack">
    <i class="fa fa-file-o fa-stack-2x" style="color: red"></i>
    <strong class="fa-stack-1x fa-stack-text text-danger">A</strong>
  </span>
</div>