Unintended icon font in site footer

[NathanBowers]

[scottgonzalez]

I'm not seeing that. What browser/OS? Are you seeing it in other browsers? Other computers?

[NathanBowers]

Mac, latest OS, both latest Chrome and latest Safari. I tried disabling my extensions to make sure that that wasn't the problem.

[ajpiano]

You don't happen to have Font Awesome installed locally, do you?

[darcyclarke]

The text beside the icon should probably not be using Font Awesome if you want it to display as proper text. Seems like a simple font-family/scope change to fix the problem @NathanBowers is seeing.

[darcyclarke]

Some more context, the following seems to be the issue, which can be found in themes/jquery/css/base.css:

https://github.com/jquery/jquery-wp-content/blob/master/themes/jquery/css/base.css#L660-L678

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome;
  ...
}

and
https://github.com/jquery/jquery-wp-content/blob/master/themes/jquery/css/base.css#L1169-L1173

[class^="icon-"],
[class*=" icon-"] {
  font-family: FontAwesome, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In most cases you usually end up only using pseudo elements (:before & :after) to showcase icons, and use the element with the class to show plain text (all the classes in Font Awesome utilize content and before to implement the icon so unless you're specifically putting the unicode characters into HTML I can't see you implementing it another way). I think it's safe to say you can scope Font Awesome to the pseudo elements, not the element as a whole, and the problem would be solved.

[class^="icon-"]:before, [class^="icon-"]:after, 
[class*=" icon-"]:before, [class*=" icon-"]:after {
    font-family: FontAwesome;
}

[NathanBowers]

I do have FontAwesome font installed. Disabling it fixed the problem for me. Still, it's probably best to only apply that font to spans or pseudo-elements that are supposed to be icons.