Twitter Bootstrap Question posted in

What effect does f have when applied to css? – Twitter bootstrap

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.

Tags:

2

Answers


  1. 0

    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: "178"
}
#second:after {
  content: "0178"
}
    With "": <i id="first"></i>
<br/>Without "": <i id="second"></i>
    Login or Signup to reply.
  2. 0

    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: enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search