Latest topics
» Hello everyone this is Adam from France
by Milouze14 Tue 21 Nov 2017, 13:23

» Auto-suggest @mentions as You Type
by T.C. Tue 21 Nov 2017, 12:36

» Personal Rank Titles
by T.C. Tue 21 Nov 2017, 12:04

» FM Themes
by SLGray Tue 21 Nov 2017, 01:08

» User - Made Creations
by SLGray Tue 21 Nov 2017, 01:07

» Search box only visible on hover
by SLGray Tue 21 Nov 2017, 00:58

» Browsers & Updates
by SLGray Tue 21 Nov 2017, 00:56

» Change newposts/no new posts/ locked icons
by T.C. Mon 20 Nov 2017, 19:52

» [HELP] About Profile Cover Code
by MaHwOs Sun 19 Nov 2017, 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

Recent Tutorials
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[FA] FA icon not rendering in mobile interface

View previous topic View next topic Go down

avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sat 15 Apr 2017, 14:31

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! study

--------

~Dr Jay
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3652
Points : 4780
Reputation : 357
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish on Sat 15 Apr 2017, 19:04

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


--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sat 15 Apr 2017, 19:22

Thank you veeeeery much for testing... Smile

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. Razz

--------

~Dr Jay
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3652
Points : 4780
Reputation : 357
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish on Sun 16 Apr 2017, 09:21

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?

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sun 16 Apr 2017, 10:46

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.

--------

~Dr Jay
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3652
Points : 4780
Reputation : 357
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish on Sun 16 Apr 2017, 11:13

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?

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Sun 16 Apr 2017, 12:45

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

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!

--------

~Dr Jay
avatar
Valoish
Graphic Designer
Title :
Gender : Female
Age : 21
Posts : 3652
Points : 4780
Reputation : 357
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish on Sun 16 Apr 2017, 18:25

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

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9589
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 17 Apr 2017, 14:49

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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Mon 17 Apr 2017, 16:07

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

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9589
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 18 Apr 2017, 10:36

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] + '; }
.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Tue 18 Apr 2017, 15:08

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

--------

~Dr Jay
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Wed 19 Apr 2017, 03:50

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

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9589
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 19 Apr 2017, 11:03

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;
}
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 608
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Wed 19 Apr 2017, 14:39

Oh cool... Coffee 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.

--------

~Dr Jay

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum