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

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

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

Answer 2

我看你的字体不对，应该改成 FontAwesome。

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

Font Awesome CSS 内容代码问题

Font Awesome CSS Content Code issue

css

font-awesome