AI Assistant
Notifications
Clear all

[Solved] Font awesome Icon Does not Display On mobile Version

7 Posts
3 Users
4 Reactions
12.9 K Views
Posts: 14
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@orgynaija)
Eminent Member
Joined: 7 years ago
[#6921]

Great forum plugging. I would like to point out that the font awesome icon displays perfectly on desktop version of website but when on mobile version, the fonts disappear and only the forum topics are displayed. None of the icons seems to display on mobile. Could this be a settings  from Gvector's Team? Or is there something we need to do to enable the font awesome icons displayed on mobile version of website? 

No icon is displayed beside each of the post.

For example   https://gvectors.com/forum  when visited from a computer shows the font awesome icons, but when visited from a mobile phone , it displays this : 

 

 
Screenshot 20181019 164049

6 Replies
Sofy
Posts: 5781
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 years ago

Hi @orgynaija,

This is designed to work this way. wpForo shows the icons on the desktop and hide those on mobile. 

You should use the following CSS code to display icons on mobile as well. Navigate to Dashboard > Forums > Settings > Styles admin page put the code in "Custom CSS Code" textarea. Save it, delete all caches and check again.

#wpforo #wpforo-wrap .wpforo-forum-icon {
display: block !important;
}

@media screen and (max-width: 620px)
#wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-info {
width: auto !important;
}

1 Reply
(@orgynaija)
Joined: 7 years ago

Eminent Member
Posts: 14
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

Thank you very much. Also I am trying to change only the icon colors, but when i do that from the style number color settings, it also changes the color for the topics description color.

How do I only customize the color for the topic icons?


Sofy
Posts: 5781
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 years ago

Put this CSS code in "Custom CSS Code"  textarea. 

#wpforo #wpforo-wrap .wpforo-forum-icon i {
color: #ff8d8d !important;
}

Don't forget to change the red marked color code before using.


DarjeelingHills.Com
Posts: 85
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@darjeeling)
Estimable Member
Joined: 8 years ago

Thank you so much for providing the code. This code worked in displaying the Icon and even changing icon only colour.

However, it is creating layout error in movile version for me when I brows in 5.5 inch screen.

The icon is pushing down the Forum text in next line. I have attached image for you to understand. Please assist.

20181022 195934

Sofy
Posts: 5781
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 years ago

Hi @writetoyogen

Try this CSS code it should help to solve the issue. 

@media screen and (max-width: 620px){
#wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-info, #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info {
width: 80% !important;
}
}

Page 1 / 2
Share: