IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Apr 2018, 11:43

» 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

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 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

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Valoish
Graphic Designer
Gender : Female
Age : 21
Posts : 3665
Points : 4948
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
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

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Valoish
Graphic Designer
Gender : Female
Age : 21
Posts : 3665
Points : 4948
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
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

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Valoish
Graphic Designer
Gender : Female
Age : 21
Posts : 3665
Points : 4948
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
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

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Valoish
Graphic Designer
Gender : Female
Age : 21
Posts : 3665
Points : 4948
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Dr Jay

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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] + '; }
.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Dr Jay

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Dr Jay

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.
avatar
Ange Tuteur
Administrator
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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;
}

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Dr Jay

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.

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