CODEWITHSUNDEEP
htmlcss
Petr Bečka
Petr Bečka

Reputation: 794

CSS replace <span> text by image inside tag <a href>

Is there any way how to hide span text inside a href tag and replace it with image?

This is my HTML code that I don't want to modify: 

<div id="social" class="icons">
        <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
        <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
        <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
</div>

In CSS file I'm trying to hide <span>Twitter</span> and replace it by image like that: 

.icons .twitter span {
    display: none;
}
.icons .twitter a {
    text-decoration:none;
    background:url('images/i_twitter.png') no-repeat;
}

My issue code.

Upvotes: 2

Views: 3354

Answers (7)

Ryan Dantzler
Ryan Dantzler

Reputation: 1144

Set the span to color:transparent.

.icons a span {
    color: transparent;
}
.icons .twitter {
    text-decoration:none;
    background:url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png') no-repeat;
}

https://jsfiddle.net/gmu4m6yy/6/

Upvotes: 0

Rob
Rob

Reputation: 118

You don't even need to span tag. That can be removed. You can do it like this for each class.

a.twitter {
  display: block;
  text-indent: -9999px;
  background: url('images/i_twitter.png') no-repeat;
  width: 32px;
  height: 32px;

Upvotes: 0

smrubin
smrubin

Reputation: 551

Setting the display to inline-block and setting a width and height for the element should work.

.icons span {
    display: none;
}

.icons .twitter, .icons .fb, .icons .linkedin {
    text-decoration:none;
    display:inline-block;
    width: 80px;
    height: 80px;
    background:url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png') no-repeat;
}

Upvotes: 1

ajm
ajm

Reputation: 20105

You're on the right track.

What's happening is by setting display: none; on your span, you're effectively causing your a to have no dimensions (anchors have an auto width and height, and there is nothing to "prop" it open so you can see your background image).

You'll need to specify explicit widths and heights for your links, as well as change their display from their default (inline) to something that allows width and height to be set, like inline-block.

.icons a{
    display: inline-block;
    height: 64px;
    overflow: hidden;
    text-indent: -9999px;   /* Hide text in spans this way so it's accessible */
    width: 64px;
}

.icons .twitter span {
    visibility: hidden; /* let's not hide that text for accessibility purposes */
}
.icons .twitter a {
    text-decoration:none;
    background:url('images/i_twitter.png') no-repeat;
}

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16821

It is not appearing because when setting display:none to the span, your anchor has no size. A possible solution is to set the image as a pseudo element, like :before

.icons .twitter span {
  display: none;
}
.icons .twitter:before {
  text-decoration:none;
  content: url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png');
}
<div id="social" class="icons">
  <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
  <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
  <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
</div>

Upvotes: 2

Gene R
Gene R

Reputation: 3744

Remove a from class declaration, and add next styles:

.icons .twitter {
    text-decoration:none;
    background:url('images/i_twitter.png') no-repeat;
    width: 100px; /* width of the image */
    height: 20px; /* height of the image  */
    display: inline-block;
}

Upvotes: 0

skorzh
skorzh

Reputation: 157

Change display of link and add width and height:

.icons .twitter span {
    display: none;
}
.icons > a {  
    display: inline-block;
    width: 64px;
    height: 64px;
    text-decoration:none;
}
.icons .twitter {
    background:url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png') no-repeat;
}

https://jsfiddle.net/03wg6vzw/

Upvotes: 1

Related Questions