CODEWITHSUNDEEP
cssfont-awesome
user5563910
user5563910

Reputation:

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:

http://www.weisbergweb.com/FontAwesome-CSS-Values/#4

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

Upvotes: 4

Views: 4200

Answers (2)

Rion Williams
Rion Williams

Reputation: 76547

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

Upvotes: 4

TOM
TOM

Reputation: 178

I see your font incorrect, should change it to 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
}

Upvotes: 1

Related Questions