字体真棒 CSS 内容代码问题答案

【问题标题】：Font Awesome CSS Content Code issue字体真棒 CSS 内容代码问题
【发布时间】：2016-06-02 13:49:35
【问题描述】：

我正在编辑一个使用 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

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

【问题讨论】：

您不应该为此元素使用 Font Awesome 字体（即font-family: 'FontAwesome';，而不是当前字体，它的定义可能不同吗？
我认为你是对的！成功了。

标签： css font-awesome

【解决方案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;
}

【讨论】：

我相信这里的正确属性是font-family，而不是font。
我已经更正了。这是一个错字，我应该从我之前的评论中粘贴过来。
感谢您的回答 Rion，非常感谢。
嗨@Rion Williams，让我知道“字体：正常正常正常”的用途，使用“正常”3次
当然，这是使用font-family 和font 之间的主要区别，font-family 可以定义所有与字体相关的属性。上面的语句相当于设置font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; line-height: 1; font-family: FontAwesome

【解决方案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
}

【讨论】：

感谢您的回答！非常感谢。