字体图标 CSS 内容代码问题

Question

我是一个编辑WordPress主题的人，该主题使用Font Awesome CSS内容代码。由于某些原因，有些代码可以正常工作，而有些则无法正常工作。

这个可以正常工作：

.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

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

- user5563910

---

对于这个元素，你应该使用 Font Awesome 字体（即 font-family: 'FontAwesome';），而不是当前字体，因为它可能没有被定义为相同的字体。 - Rion Williams

我认为你是对的！那招奏效了。 - user5563910

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

- Rion Williams

---

我认为这里正确的属性是 font-family，而不是 font。 - Chris

我已经纠正了它。那是一个笔误，我应该只是从我的先前评论中粘贴过来。 - Rion Williams

谢谢你的回答，Rion。非常感谢。 - user5563910

嗨@Rion Williams，请告诉我“font: normal normal normal”的目的，为什么要使用3次“normal”。 - Sayed Rafeeq

当然，使用 font-family 只设置字体，而 font 可以定义所有与字体相关的属性，这是它们之间的主要区别。上述语句相当于设置 font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; line-height: 1; font-family: FontAwesome。 - Rion Williams

感谢您宝贵的回复！ - Sayed Rafeeq

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
}

- TOM

---

谢谢你的回答！非常感激。 - user5563910