how do i hide font icon text

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Post Reply
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 172
Joined: Sat Nov 17, 2018 1:52 pm

how do i hide font icon text

Post by shaibustephen » Sun Oct 13, 2019 12:15 am

I am using fontawesome icon and text as <li><span class="fa fa-envelope-o mr-2"></span></li>. How do i hide only the text at mobile devices with screen below @media(max-width:768px){} and show only the icon in this devices?

User avatar
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia

Re: how do i hide font icon text

Post by john-doe » Sun Oct 13, 2019 3:20 pm

You have to rearrange the tags, moving the icon span inside the a tag where the email is set. Then you have to set the address inside the a tags within a span tag with a custom class like this:

Code: Select all

	<a href="" class="contactemail">
	<span class="fa fa-envelope-o mr-2"></span>
	<span class="mobhidemail"></span>
So then you can set on the CSS like this

Code: Select all

	a.contactemail span.mobhidemail{


That should work. - Custom templates and design services.

Post Reply

Return to “General Questions/New to Joomla! 3.x”