I was wondering if there is any way to display the icons only (without the accompanying text such as "Twitter" or "LinkedIn"). It's not possible through CSS because the icon and text are inside the same div.

Thanks.

Comments

q0rban’s picture

q0rban commented
Status: Active » Fixed

Actually it is possible via CSS, since the icons are added via CSS. Please see this comment: http://drupal.org/node/640084#comment-2295176

:)

zdean’s picture

zdean commented

would you mind explaining how to do it...the only thing I can think of is to make

a.follow-link {
display: none;
}

However, this makes the text and the icon disappear. I only want the text to go away.

Thanks for your help.

q0rban’s picture

q0rban commented

Did you read the comment I linked to? ;)

zdean’s picture

zdean commented

Sorry, I missed the "text-indent" earlier, but I would worry that this might have a negative impact on SEO...kind of like hiding keywords by making them the same color as the background. It seems like a cleaner approach would be to make 2 separate divs.

Thanks.

q0rban’s picture

q0rban commented

No, this is the preferred text replacement method, and is SEO friendly. (Search engines don't care if the text is indented or not)

zdean’s picture

zdean commented

thank you.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

beautifulmind’s picture

beautifulmind
he/him
Primary language Gujarati
Location Dubai
commented

The complete CSS rule to display icons only:

.follow-links a {
	float: left;
	text-indent: -99999px;
}