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
Luis Santos
591 PointsIcons are not showing to the left of the information on the contact page (phone, mail,twitter).
this is my code:
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info { 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') }
3 Answers
edinjusupovic
5,664 PointsI think we need to see the whole code to be able to troubleshoot better.
Cheers.
Luis Santos
591 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</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>
<h3>Informação Geral</h3>
<p>Não estou à procura de um novo trabalhao em design, mas estou disponivel para discutir ideias sobre o tema</p>
<p>Por favor, utilize apenas um numero de contacto para comunicar se for urgente, caso contrário utilize o email ou o facebook</p>
</section>
<h3>Detalhes de contactos</h3>
<ul class="contact-info"></ul>
<li class="phone"><a href="tel:964557777">964557777</a></li>
<li class="mail"><a href="mailto:lpintarola@hotmail.com">lpintarola@hotmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=lpintarola">@lpintarola</a></li>
<section>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body> </html>
Luis Santos
591 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</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>
<h3>Informação Geral</h3>
<p>Não estou à procura de um novo trabalhao em design, mas estou disponivel para discutir ideias sobre o tema</p>
<p>Por favor, utilize apenas um numero de contacto para comunicar se for urgente, caso contrário utilize o email ou o facebook</p>
</section>
<h3>Detalhes de contactos</h3>
<ul class="contact-info"></ul>
<li class="phone"><a href="tel:964557777">964557777</a></li>
<li class="mail"><a href="mailto:lpintarola@hotmail.com">lpintarola@hotmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=lpintarola">@lpintarola</a></li>
<section>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body> </html>
Luis Santos
591 PointsI do not understand why when I copy the code here it all comes together
Savannah Lynn
13,662 PointsSavannah Lynn
13,662 PointsCan you post your full code and a screenshot of where your icons are appearing on your preview page?