[FA] FA icon not rendering in mobile interface

This nagging "bug?" in the GUI for FAE does not show the FontAwesome icon for the search button or search icon in general. I do not know why mobile devices do not render this. I noticed it right from the start, but I've been ignoring it for a long time.

Here is what it looks like for this site FMDesign:



I figured this would need repaired in FAE, because this is one of the icons that simply does not render correctly.

I would love to brainstorm which other icon could be used in place of it as a capable replacement, or the same icon is used on Desktop, but on Mobile another icon could be swapped.

If someone cannot reproduce this, please let us know!

---

My starting list of ideas:

*Right arrow style*











*Link style*


*List style*




---

OKAY - Your Turn!

I can see all the icons just fine on my Samsung and I just tested on my Mom's iPhone and hers works as well.. Used Google Chrome for both tests

Thank you veeeeery much for testing...

I can confirm this is a problem for Firefox on Android then. Hmm... What to do...?

I did test other browsers for Android, even an incognito and it is showing the icon(s) fine. That search icon is not liked by Firefox for Android.

Yup~
The same thing happens to me if I'm browsing FMD on school computers on Mozilla. But that's because their version is so outdated it's unreal
Are all the other icons showing fine at all times?

XD Yeah, all other icons okay. That's what's confusing. I used code fa fa-search, which is unique to FontAwesome. But then realizing the issue was seen on this site as well tells me FF doesn't like that code for the search icon.

Hmm.. Weird.. o-o What happens when you go on FA's official website on Mozilla? Do all the icons show up fine there or is the search icon messed up there too?

On the FA cheatsheet, it's like the only one that fails.

Mysterious...

Edit: I can verify fa-search-plus and fa-search-minus are working on mobile Firefox. I am using fa-search-plus on a testing site and it does not look bad! 

Seems like it's an issue on Mozilla's side :c I did some googling but the majority of topics I found were about the desktop browser and not the mobile one, and they pretty much all just had a plugin that had the old FA stylsheet that was overriding the new and updated one which is why some icons weren't showing.. Idk if your phone could have some plugin activated or if Mozilla's mobile browser is just not up to date x_x

Hmm.. that is a weird one. I mean the value is set as the entity () so it should work. Perhaps the browser doesn't support the character code or it's reserved, because you said the other characters work right ? Regardless, the plus and minus icons are a good alternative, because you could knock out the inner icon with a pseudo element.

Interesting. I'd say worth a try. I might try a few things then.

Here's a quick mockup that you can use to knock out the inner icon :

Code:

#search { position:relative; }

#search:after {
  content:"";
  background:#0F0;
  position:absolute;
  height:7px;
  width:7px;
  right:18px;
  top:17px;
  border-radius:100%;
  pointer-events:none;
}

Change 0F0 to the color of the button and it'll hide the icon. Only tricky part is simulating hover and active events when hovering the button, since the pseudo element is attached to its parent. But if you want this to change with the theme just edit ALL.JS and replace

Code: { background-color:' + palette[1] + '; }

with

Code: , #search:after { background-color:' + palette[1] + '; }

.

Okay, I'll put this on my to-do to try soon. I will update you when done.

I will keep experimenting and trying out some things... Thanks for the feedback @Valoish and @Ange Tuteur. Solved.

No problem. ^^

I almost forgot : you can also go with the old fashion method of setting the search icon as a background image. I used to do that on some of the older themes I designed or ones where I'm not using Font Awesome.

Code:

input.search-button {
  font-size:0;
  background-image:url(http://i21.servimg.com/u/f21/18/21/41/30/search10.png) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}

Oh cool... I remember a while back playing with emojis and FA codes in creating lists for a marketing page... It adds a whole different flair than it used to.