What is the source of facebook logo image?

Question

http://www.facebook.com homepage when displayed in firebug shows that the image/icon of "facebook" on the top left corner has the following HTML:

 <i class="fb_logo img sp_ezjerk sx_440431">
   <u>Facebook logo
   </u>
 </i>

Even the media resource list does not show any image/icon in png/ico/gif for the "facebook" image that appears.

I have tried searching for that logo source even in chrome developer tools, but I am unable to locate it.

Firstly, where does the text logo come from?

Secondly, why is it placed under the < i > tag which is primarily used for italicized text.

Answer 1

A quick inspection of that i element shows the following CSS classes being applied:

img
sp_ezjerk
sx_440431

The latter two appear to be dynamically generated and change with each page load.

The first of the latter two, on each page load, shows the following CSS rules:

background-image: url("/rsrc.php/v2/yR/r/7TyBDSy09g8.png");
background-repeat: no-repeat;
background-size: 104px 488px;
display: inline-block;
height: 32px;
width: 24px;

The image file at /rsrc.php/v2/yR/r/7TyBDSy09g8.png contains the logo, and the CSS is positioning it to display only that portion of the image.

As for why they chose an i element, that is beyond me. I wouldn't have chosen it, but I guess they did.