Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Yesterday at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Yesterday at 16:01

» Add a login popup for the toolbar
by Ape Sun 24 Sep 2017, 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 6 users online :: 2 Registered, 0 Hidden and 4 Guests :: 2 Bots

Bigtuber, Eslam Love

[ 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 : 550
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 : 3633
Points : 4702
Reputation : 356
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/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 : 550
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 : 3633
Points : 4702
Reputation : 356
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/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 : 550
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 : 3633
Points : 4702
Reputation : 356
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/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 : 550
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 : 3633
Points : 4702
Reputation : 356
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/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 : 21
Posts : 4688
Points : 9738
Reputation : 2332
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 : 550
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 : 21
Posts : 4688
Points : 9738
Reputation : 2332
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 : 550
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 : 550
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 : 21
Posts : 4688
Points : 9738
Reputation : 2332
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 : 550
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