Using an image sprite with just icons

HTML & CSS
1

I’ve never used image sprites with just icons before.

This is what I have.

.facebook {
  width: 50px;
  height: 50px;
  background: url(https://i.imgur.com/MqbOicN.png) 0 0;
}

.twitter {
  width: 50px;
  height: 50px;
  background: url(https://i.imgur.com/MqbOicN.png) -65px 0;
}

.instagram {
  width: 50px;
  height: 50px;
  background: url(https://i.imgur.com/MqbOicN.png) -130px 0;
}

.pinterest {
  width: 50px;
  height: 50px;
  background: url(https://i.imgur.com/MqbOicN.png) -195px 0;
}

<a target="_blank" href="https://www.facebook.com/" </a>

<a target="_blank" href="https://twitter.com/"</a>

<a target="_blank" href="https://www.instagram.com/"</a>

<a target="_blank" href="https://www.pinterest.com/"</a>

2

Is there a question here?

3

How do I set the html part up?

That’s what I’m stuck on.

4

I’m doing this all wrong I think.

5

I almost got it, I think.

What am I doing wrong here?


.icon {
  width: 245px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/MqbOicN.png');
}

.facebook a {
  background-position: 0px 0;
}

.twitter a {
  background-position: -65px 0;
}

.instagram a {
  background-position: -130px 0;
}

.pinterest a {
  background-position: 195px 0;
}


<div class="icon">
  <div class=" facebook" <a target="_blank" href="https://www.google.com/"></a>
  </div>
  <div class="twitter" <a target="_blank" href="https://www.google.com/"></a>
  </div>
  <div class="instagram" <a target="_blank" href="https://www.google.com/"></a>
  </div>
  <div class=" pinterest" <a target="_blank" href="https://www.google.com/"></a>  
</div>

</div>

976×271 30.4 KB

6

I did this, but the links aren’t clickable.


.icon {
  width: 245px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/MqbOicN.png');
}

.facebook a {
  background-position: 0px 0;
}

.twitter a {
  background-position: -65px 0;
}

.instagram a {
  background-position: -130px 0;
}

.pinterest a {
  background-position: 195px 0;
}


<div class="icon">
  <a target="_blank" class=" facebook" href="https://www.google.com/"></a>

  <a target="_blank" class="twitter" href="https://www.google.com/"></a>

  <a target="_blank" class="instagram" href="https://www.google.com/"></a>

  <a target="_blank" class=" pinterest" href="https://www.google.com/"></a>

989×279 28.9 KB

7

Anchors are inline elements and dimensions don’t apply to inline elements. Change them to display:block.

This is not the first time you have been told this and is almost lesson 1 in css.

1 Like
8

Like this?

.twitter a {
  display:block;
  background-position: -65px 0;
}

The links are still not clickable.


.icon {
  width: 245px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/MqbOicN.png');
}

.facebook a {
  display: block; 
  background-position: 0px 0;
}

.twitter a {
  display: block;
  background-position: -65px 0;
}

.instagram a {
  display: block;
  background-position: -130px 0;
}

.pinterest a {
  display:block;
  background-position: 195px 0;
}
9

No, like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">

body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.social-links {
    width: 245px;
    padding: 15px;
    margin:0 auto;
    border-radius: 8px;
    list-style: none;
    background-color: #000;
    box-shadow: 5px 5px 5px rgba( 0, 0, 0, 0.3 );
    overflow: hidden;
 }

.social-links li {
    float:left;
    width: 50px;
    margin-right: 15px;
 }

.social-links li:last-of-type  {
    margin-right: 0;
 }

.social-links a {
    position: relative;
    display: block;
    height: 50px;
    font-size: 0.75em;
    word-break: break-all;
 }

.social-links span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://i.imgur.com/MqbOicN.png )
 }

.social-links li:nth-of-type(2)  span{
    background-position: -65px 0;
 }

.social-links li:nth-of-type(3) span {
    background-position: -130px 0;
 }

.social-links li:nth-of-type(4) span {
    background-position: -195px 0;
 }

</style>

</head>
<body> 

 <ul class="social-links">
  <li><a href="https://facebook.com">facebook<span><span></a></li>
  <li><a href="https://twitter.com">twitter<span><span></a></li>
  <li><a href="https://instagram.com">instagram<span><span></a></li>
  <li><a href="https://pinterest.com">pinterest<span><span></a></li>
 </ul>

</body>
</html>

coothead

1 Like
10

Of course they’re not clickable. There’s nothing there to click. 

<div class="icon" >
  <a target="_blank" class=" facebook" href="https://www.google.com/"></a>

  <a target="_blank" class="twitter" href="https://www.google.com/"></a>

  <a target="_blank" class="instagram" href="https://www.google.com/"></a>

  <a target="_blank" class=" pinterest" href="https://www.google.com/"></a>


</div>

Your <a> tags need some actual content to form the clickable target, either text or an image.

<a target="_blank" class=" pinterest" href="https://www.google.com/">This is the link text.</a>

or

<a target="_blank" class=" pinterest" href="https://www.google.com/"><img src="pinterest.png" width="30" height="30" alt="Visit Pinterest"></a>
3 Likes
11

Think about what you are doing a little more as we have been through this a thousand times before.

You have not sized the anchors to match the size of the individual sprite and you have applied the background image to the div instead of each anchor anyway.

Your code would have looked like this if you did it properly.

.icon a {
  width: 50px;
  height: 50px;
  display:block;
  background-repeat: no-repeat;
  background-image: url('https://i.imgur.com/MqbOicN.png');
}
.facebook {background-position: 0px 0;}
.twitter { background-position: -65px 0;}
.instagram { background-position: -130px 0;}
.pinterest { background-position: -195px 0;}

However as you want the items next to each other horizontally then you would need to float the anchors instead (or use one of the more modern method of horizontal layout (flexbox etc). If you float them then you don’t need the display:block because floated elements are naturally a block display no matter the tag applied to.

However because these are background images that means you have no content so any assistive technology will not have a clue what your empty anchors relate to.

@coothead above has given you a perfect example of how to do this with accessibility in mind by including the text in the link and then placing the image on top of the text. This is the method you should follow. (Note that coothead’s example is missing the closing span tag but that’s probably just a typo when pasting text in here. i.e. <span><span> should be <span></span>)

4 Likes
12

Hi there asasass,

as @PaulOB has pointed out, my code had some typos that I overlooked. :wonky:

It also lacked a “background-color” for the “a elements” which would have
made the links text illegible. :wonky:

Here is the corrected - ( and validated :winky: ) - code…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">

body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

.social-links {
    width: 260px;
    padding: 15px 0 15px 15px;
    margin:0 auto;
    border-radius: 8px;
    list-style: none;
    background-color: #000;
    box-shadow: 5px 5px 5px rgba( 0, 0, 0, 0.3 );
    overflow: hidden;
 }

.social-links li {
    float:left;
    width: 50px;
    margin-right: 15px;
 }

.social-links a {
    position: relative;
    display: block;
    height: 50px;
    background-color: #fff;
    font-size: 0.75em;
    word-break: break-all;
 }

.social-links span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url( https://i.imgur.com/MqbOicN.png )
 }

.social-links li:nth-of-type(2)  span{
    background-position: -65px 0;
 }

.social-links li:nth-of-type(3) span {
    background-position: -130px 0;
 }

.social-links li:nth-of-type(4) span {
    background-position: -195px 0;
 }

</style>

</head>
<body> 

 <ul class="social-links">
  <li><a href="https://facebook.com">facebook<span></span></a></li>
  <li><a href="https://twitter.com">twitter<span></span></a></li>
  <li><a href="https://instagram.com">instagram<span></span></a></li>
  <li><a href="https://pinterest.com">pinterest<span></span></a></li>
 </ul>

</body>
</html>

coothead

3 Likes
13

If I did it like this,

This wouldn’t need display block?

This one uses float left without the sprite.

Or do I put display block, now I’m confused.

.facebook,
.twitter,
.instagram,
.pinterest {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.facebook {
  background: url("https://i.imgur.com/Cp7WRET.png") no-repeat;
}

.twitter {
  margin: 0 11px;
  background: url("https://i.imgur.com/MchCG7F.png") no-repeat;
}

.instagram {
  background: url("https://i.imgur.com/3FPoPUy.png") no-repeat;
}

.pinterest {
  margin-left:11px;
  background: url("https://i.imgur.com/IuKZk48.png") no-repeat;
}

<a target="_blank" href="foo.html">
  <div class="facebook"></div>
</a>

<a target="_blank" href="foo.html">
  <div class="twitter"></div>
</a>

<a target="_blank" href="foo.html">
  <div class="instagram"></div>
</a>

<a target="_blank" href="foo.html">
  <div class="pinterest"></div>
</a>
14

This wouldn’t need display block?

What part of the following don’t you understand?

Why are you still using verbose code when you have been shown several examples with much more concise code. You don’t need to keep repeating the same background image url as it is only the background position that changes.

Edit: just noticed you are using 4 different images now!! What’s the point of that? If you are not using sprites then don’t use a background image as the image is actually classed as content in this context.

Why have you put a div inside tha anchor now when no one has shown that as the answer? You don’t need anything inside the anchor unless you use the better method that coothead showed you!

2 Likes
15

I fixed it here, you can tell me if it’s still wrong.

.container {
  width: 233px;
  height: 50px;
}

.facebook,
.twitter,
.instagram,
.pinterest {
  width: 50px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.facebook {
  background: url("https://i.imgur.com/Cp7WRET.png") no-repeat;
}

.twitter {
  margin: 0 11px;
  background: url("https://i.imgur.com/MchCG7F.png") no-repeat;
}

.instagram {
  background: url("https://i.imgur.com/3FPoPUy.png") no-repeat;
}

.pinterest {
  margin-left: 11px;
  background: url("https://i.imgur.com/IuKZk48.png") no-repeat;
}

<div class="container">
  <a class="facebook" href="foo.html" target="_blank"></a>
  <a class="twitter" href="foo.html" target="_blank"></a>
  <a class="instagram" href="foo.html" target="_blank"></a>
  <a class="pinterest" href="foo.html" target="_blank"></a>
</div>
16

If extremely poor coding is wrong, then it’s still wrong. :eyebrows:

coothead

3 Likes
17

What do you mean?

18

I fixed that:

<div class="container">
  <a class="facebook" href="foo.html" target="_blank"></a>
  <a class="twitter" href="foo.html" target="_blank"></a>
  <a class="instagram" href="foo.html" target="_blank"></a>
  <a class="pinterest" href="foo.html" target="_blank"></a>
</div>
19

I really do not have the inclination to
reiterate the faults in your coding. :unhappy:

coothead

1 Like
20

Why is there something wrong with how that is set up?

If I wasn’t using an image sprite.

Just 4 images hooked up to links.

Why is that wrong how I set it up?