Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Failing to add icons on contact page

I am following on Work spaces as per instruction but I cannot see the images I have added to CSS . Anyone with an idea what I can do?I have repeated the procedures but still same result.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It's going to be easiest to troubleshoot this for you if we can see your workspace. Fortunately, workspaces has a feature designed for just this type of thing! :smiley: If you open your workspace you'll see a camera icon on the upper right hand side. Click that then click create a snapshot. Once it's made click on it to follow the link. Copy and paste the URL here so we can help you further :thumbsup:

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Jocelyn Nyaguse I think I found the issue! It's in your main.css.

Yours looks like this:

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

Try this instead:

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

Note the removal of the display of block from this portion. Don't forget to save and refresh and all that good stuff and give it a whirl! :dizzy:

Yay..It worked.Thank you!

Now my html is being rejected by the validator. I have no idea what is wrong.Here is the link https://w.trhou.se/nthoble9lx

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Jocelyn Nyaguse I'm assuming you mean the w3c HTML validator. And the problem seems to be that you're using a link to two separate google fonts on one line. This works and is fine, but it's what's causing the error. Here's the text directly from the w3c validation error:

Syntax of URL: Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in NFC and spaces should be escaped as %20. Common non-alphanumeric characters other than ! $ & ' ( ) * + - . / : ; = ? @ _ ~ generally must be percent-encoded. For example, the pipe character (|) must be encoded as %7C.

This means that for it to pass validation, you need to replace the pipe with %7C. Hope this helps! :smiley:

Robert Tyree
Robert Tyree
13,335 Points

As Jennifer mentioned, we can help you better if we can see your Workspace and/or code.

One thing to point out though is that any images should be included in your HTML rather than your CSS.

The HTML will look something like this:

<img src="url" alt="some_text"> 

Hope that helps! :-)

So I managed to add my iconography.As I am creating my three column layout,the icons look funny.what do I do?Here's a link to my work space https://w.trhou.se/atiexpydcn