Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

Footer contact - can(t get any background images next to my contactitems

Hi everybody!

i am having some problems with my contact section. i would like to add some small call and mail icons next to my contact items "mail us" and "call us".

I did this by adding the icon to the background with background-image. I added no-repeat to my background-image. Then I added some padding-left to my contact items so that this background image get's shown.

I have no idea why I can't get the browser to show my background images?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/testcss.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>
    <footer class="main-footer">
        <div class="contact">
          <p>
            Questions?
          </p>
          <a id="contact-call" href="#">call us</a>
          <a id="contact-mail" href="#">Mail us</a>
        </div>
    </footer>

  </body>
</html>

.main-footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 3em 1em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1em;
}

.main-footer a {
  text-transform: none;
  font-weight: 400;
  font-size: 0.8rem;
  display: block;
  margin-top: 1em;
  padding: 10px 10px 10px 30px;
  border: 1px solid white;
  color: white;
  text-decoration: none;
}

#contact-call, #contact-mail {
  background-repeat: no-repeat;
  background-size: 25px;
}

#contact-call {
  background-image: url(../images/quality-red-01.png);
}

#contact-mail {
  background-image: url(../images/mailen.png);
}
Sergey Vrenev
Sergey Vrenev
28,778 Points

I think it's best to add icons with ::before pseudo class. http://fontawesome.ru has very nice documentation about it

3 Answers

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Thanks but this website seems to be in Russian.. Unfortunatly i don't speel Russian. Thanks anyway!

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Here's the english version: https://fortawesome.github.io/Font-Awesome/ of the site mentioned by Sergey!

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

I'm sorry to say but this link just links to the promopage for fontawesome.

With all respect here but could someone look at my code and try finding something wrong?

That would help me a lot.

Thanks!

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Kenny Parewijck,

sorry for the late reply. Anyway, what Sergey means is that you can achieve the same result with an external library like Font Awesome by following the instructions on their site.

I try to play around with your code and I can't figured out what make things not working. So I decide to rewrite part of the html and almost everything in the css as I would do to achieve the result that you want! Here you can find a pen with the code. The icon doesn't show up since they're not uploaded with the pen, but there's all you need to get the result. With the code in this pen you have only to change the url with your images.

I also post you the link to this video, which is a lesson that talk about styling footer with the contact icon.

I hope that the code you'll find in the pen is what your looking for and it helps you figured out your problem.

Best, Gianmarco