What effect does \f have when applied to css?

Question

I am reading the code from Font-Awesome, which is a library that (from what I understand) overwrites parts of Bootstrap to modify some of the code.

There is a class called fa-twitter, created in Font-Awesome:

.fa-twitter:before {
    content: "\f099";
}

I do not understand what \f is doing in this situation, and where the numbers "099" are being used. I have tried searching Font-Awesome on Github, thinking perhaps .fa-twitter is defined elsewhere, or something the numbers could be used in, but I haven't found anything so far.

Answer 1

It's not \f that matters. It's Unicode character code.

\f099 means It's not literal "f099" but Unicode value of "f099"

Table itself

Example:

#first:after {
  content: "\0178"
}
#second:after {
  content: "0178"
}

With "\": <i id="first"></i>
<br/>Without "\": <i id="second"></i>

Answer 2

It's not 'f', it's the content that's important:

If you have code like this:

<p class="email">[email protected]</p>

You'll just get the email address: [email protected].

But if you add this in the CSS:

.email:before {
    content: "Email: "
}

You'll get Email: [email protected] without making any changes to the HTML.

In this case, it's adding a symbol, indicated by the code F099. In other words, the twitter bird: