css - Font Awesome CSS 内容代码问题

Question

我正在编辑一个使用 Font Awesome CSS 内容代码的 wordpress 主题。出于某种原因，一些代码有效，而另一些则无效。

这个有效:

.wpl_prp_show_detail_boxes_cont .rows.feature.single:after {
    content: "\f1b9";
    display: block;
    float: right;
    font: 16pt "wpl-front";
    font-weight: normal;
    background: #FFFFF;
    color: #29a9df;
    padding: 0 2px
}

但是如果我使用取自此引用的 CSS 内容代码“\f00c”(复选标记):

http://www.weisbergweb.com/FontAwesome-CSS-Values/#4

它只是显示一个空白方 block 。可能是什么问题？

Answer 1

您需要明确指出元素应使用实际的 Font Awesome 字体，而不是当前的字体，后者可能没有相同的字符定义:

/* This will allow the character codes to correspond to the proper glyphs */
font-family: FontAwesome;

您以前的字体“wpl-front”可能只是没有 Font Awesome 使用的值的有效字形，因此显示了空字符。您可以从 Font Awesome 本身的定义中看到这一点:

/* Definitions within Font Awesome */
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}