FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

[FA] FA icon not rendering in mobile interface

View previous topic View next topic Go down

Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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:

[FA] FA icon not rendering in mobile interface Fmd-bu10

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
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7119
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish 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
[FA] FA icon not rendering in mobile interface Screen10
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7119
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish 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 [FA] FA icon not rendering in mobile interface 1f602
Are all the other icons showing fine at all times?
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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.
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7119
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish 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?
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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!
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7119
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish 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
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Mon 17 Apr 2017, 16:07

Interesting. I'd say worth a try. I might try a few things then.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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] + '; }
.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur 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;
}
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2929
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay 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.
Sponsored content

PostSponsored content

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