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
Jeffrey Cunningham
5,592 PointsCan'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.
6 Answers
Sergey Podgornyy
20,660 PointsYou 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');
}
Jeffrey Cunningham
5,592 PointsThank you!!!!
Sergey Podgornyy
20,660 PointsYou are welcome! =)
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 PointsYour 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
5,592 PointsSergey 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>© 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
20,660 PointsAs I can see on your screenshot you have problem on Contact page, but you provided html of your Home page
Jeffrey Cunningham
5,592 PointsSergey Podgornyy Sorry about that. I have replaced it with the correct html.
Sergey Podgornyy
20,660 PointsYou 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
5,592 PointsThank you, but that does not seem to fix the issue.
Sergey Podgornyy
20,660 PointsSet proper background-size:
.contact-info a{
background-size: 20px 20px;
}
Jeffrey Cunningham
5,592 PointsI corrected that as well. The problem persists.
Felipe Marconatto Ochman
4,494 PointsHi i'm having the same problem Do you fixed? How is going? Be waiting
Sergey Podgornyy
20,660 PointsHi Felipe Marconatto Ochman, yes problem was solved. Can you post your code, that we can find where problem is?
Felipe Marconatto Ochman
4,494 PointsHi Sergey I found what was wrong. I forgot an a on my css thanks!
Sergey Podgornyy
20,660 PointsI am glad that the problem is solved
Sergey Podgornyy
20,660 PointsSergey Podgornyy
20,660 PointsPlease, provide also your HTML code