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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Jeffrey Cunningham
Jeffrey Cunningham
5,592 Points

Can't get my icons to look right.

For some reason my the icons we are setting up in the video look like this: http://i.imgur.com/utNvVDJ.png

Here is my CSS:

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

Any help would be greatly appreciated.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Please, provide also your HTML code

6 Answers

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

You need assign background image to anchor element:

.contact-info li.phone a{
    background-image: url('../img/phone.png');
}

.contact-info li.mail a{
    background-image: url('../img/mail.png');
}

.contact-info li.twitter a{
    background-image: url('../img/twitter.png');
}
Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

Your css code block works fine in my webpage. I'll post my full Contact Page css code for you to double-check for something else.

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}
.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
.contact-info li.phone a {
  background-image: url('../img/phone.png');
}
.contact-info li.mail a {
  background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}
Jeffrey Cunningham
Jeffrey Cunningham
5,592 Points

Sergey Podgornyy Here is the HTML and CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jeff Cunningham | WordPress Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Jeff Cunningham</h1>
      <h2>WordPress Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I'm not currently looking for development work, but I'm availabl for guest speaking and similair engagements. Please fill in the form below to get in contact.</p>
      <p>Please only use phone contact for urgent inqueries, other wise tweet me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class"phone"><a href="tel:215-883-4583">215-883-4583</a></li>
          <li class="mail"><a href="mailto:cunninghamj20@gmail.com">cunninghamj20@gmail.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href=""><img src="img/twitter-wrap.png" alt="Twitter Logo" class= "social-icon"></a>
        <a href=""><img src="img/facebook-wrap.png" alt="Facebook Logo" class= "social-icon"></a>
        <p>&copy; 2016 Jeff Cunningham.</p>
      </footer>
    </div>
  </body>
</html>
/******************
GENERAL
*******************/

body{
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}

a {
text-decoration: none;
}

img {
max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/******************
HEADING
*******************/

header{
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
text-align: center;
margin: 0;
}

h1 {
font-family: 'Changa One', sans-serif;
margin: 15px o;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}

h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}



/******************
NAVIGATION
*******************/

nav{
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
/******************
FOOTER
*******************/

footer{
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/******************
PAGE: PORTFOLIO
*******************/

#gallery{
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75m;
color: #bdc3c7;
}

/******************
PAGE: ABOUT
*******************/
.profile-picture {
/*  display: block;*/
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 20%;
}


/******************
PAGE: CONTACT
*******************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone {  
  background-image: url('../img/phone.png');
}

.contact-info li.mail {  
  background-image: url('../img/mail.png');
}

.contact-info li.twitter {  
  background-image: url('../img/twitter.png');
}



/******************
COLORS
*******************/

/* Site Body */
body{
background: #fff;
color: #999;
}

/* green header */
header {
background: #7a00cc;
border-color: #5b0099;
}

/* nav background on mobile*/
nav {
  background: #5b0099;
}

/* logo text */
h1, h2 {
color: #fff;
}

/* links */
a {
color: #7a00cc;
}

/* nav links color */
nav a, nav a:visited {
color: #fff;
}

/* selected nave link color */
nav a.selected, nav a:hover {
color: #2d004d;
}
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

As I can see on your screenshot you have problem on Contact page, but you provided html of your Home page

Jeffrey Cunningham
Jeffrey Cunningham
5,592 Points

Sergey Podgornyy Sorry about that. I have replaced it with the correct html.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

You forgot equal sign after class attribute in first list item:

<ul class="contact-info">
     <li class="phone"><a href="tel:215-883-4583">215-883-4583</a></li>
     <li class="mail"><a href="mailto:cunninghamj20@gmail.com">cunninghamj20@gmail.com</a></li>
     <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
</ul>
Jeffrey Cunningham
Jeffrey Cunningham
5,592 Points

Thank you, but that does not seem to fix the issue.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Set proper background-size:

.contact-info a{
    background-size: 20px 20px;
}
Jeffrey Cunningham
Jeffrey Cunningham
5,592 Points

I corrected that as well. The problem persists.

Hi i'm having the same problem Do you fixed? How is going? Be waiting

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Hi Felipe Marconatto Ochman, yes problem was solved. Can you post your code, that we can find where problem is?

Hi Sergey I found what was wrong. I forgot an a on my css thanks!

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

I am glad that the problem is solved :blush: