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
}

字体真棒CSS内容代码问题

2 个答案: