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
shaibustephen
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> info@phentemplates.com</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
john-doe
Joomla! Guru
Joomla! Guru
Posts: 909
Joined: Tue Apr 19, 2011 7:39 pm
Location: Colombia
Contact:

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

<li>
	<a href="mailto:info@phentemplates.com" class="contactemail">
	<span class="fa fa-envelope-o mr-2"></span>
	<span class="mobhidemail">info@phentemplates.com</span>
	</a>
</li>
So then you can set on the CSS like this

Code: Select all


@media(max-width:768px){
	a.contactemail span.mobhidemail{
		display:none;
	}

} 

That should work.
www.aldemar-hernandez.com - Custom templates and design services.


Post Reply

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