Bruno Bruno - 1 year ago 131
CSS Question

Font Awesome CSS Content Code issue

I am editing a wordpress theme which uses Font Awesome CSS content codes. For some reason, some codes work and others don't.

this works:

.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

but if I use CSS content code "\f00c" (check-mark) taken from this reference:

It just shows a blank square. What could be the issue?

Answer Source

You need to explicitly indicate that the elements should use the actual Font Awesome font as opposed to the current one, which likely doesn't have the same character definitions :

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

Your previous font "wpl-front" likely just didn't have valid glyphs for the values that Font Awesome uses, thus the empty character being displayed. You can see this from the definition within Font Awesome itself :

/* 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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download