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
Harrison Hondo
7,283 PointsIcons not showing up and Twitter link not showing.
I don't believe I made any mistakes when following Nick's instructions but I am not able to get my icons to show up and the hyperlink for my twitter is also not appearing. I did however not create an img folder and left all of the photos in the initial "How to Make a Website" folder because putting them in an img folder would crash my workspace for some reason. I tried a few different file paths to get to the icons but none of them worked. Another thing that should be noted is that I refrained from using the "-" in my contact-info class on both my HTML and CSS because for some reason the classes never work when I use a dash in them but they worked when I removed them.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Harrison Hondo | Expert Cupcake Baker</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic|Francois+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Harrison Hondo</h1> <h2>Expert Cupcake Baker</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>General Information</h3> <p>I am not currently looking for new design work but I am available for speaking gigs and similar engagements. If you have any questions please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p> </section> <section> <h3>Contact Details</h3> <ul class="contactinfo"></ul> <li class="phone"><a href="tel:503-412-9982">503-412-9982</a></li> <li class="mail"><a href="mailto:hsh2692@gmail.com">hsh2692@gmail.com</a></li> <li class="twitter"><a href="https://twitter.com/intent/tweet?screen_name=harrisonhondo">@harrisonhondo</a></li> </section> <footer> <a href="https://twitter.com/HarrisonHondo"><img src="twitter-wrap.png" alt="Twitter Logo" class="icon"></a> <a href="https://www.facebook.com/harrison.hondo"><img src="facebook-wrap.png" alt="Facebook Logo" class="icon"></a> <p>Ā© 2014 Harrison Hondo.</p> </footer> </div> </body> </html>
/************************ GENERAL ************************/
body { font-family: 'Droid Serif', 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: 'Francois One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75 em; 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; }
/************************ Footer ************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.icon { width: 20px; height: 20px; margin: 0 5px; }
/************************ 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.75em; color: #bdc3c7 }
/************************ PAGE: ABOUT ************************/
.profilephoto { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/************************ PAGE: CONTACT ************************/
.contactinfo { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contactinfo a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
.contactinfo li.phone a { background-image: url('/How to Make a Website/phone.png'); }
.contactinfo li.mail a { background-image: url('../mail.png'); }
.contactinfo li.twitter a { background-image: url('../twitter.png'); }
/************************ COLORS ************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #11bbff; border-color: #11bbdd; }
/* nav background on mobile */ nav { background: #11bbdd; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #11bbff; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #5599dd; }
1 Answer
Rebecca Vonada
5,274 PointsWhat browser are you using?
Do you have AdBlock installed? I had the same problem and it seems that AdBlock now blocks social buttons - which includes the Twitter link included. If disabling it doesn't work, you can either uninstall it or test your code on another browser.
Harrison Hondo
7,283 PointsHarrison Hondo
7,283 PointsI'm using chrome and disabling adblock fixed that problem. Thanks!
dwayne barnes
558 Pointsdwayne barnes
558 PointsI'm having the same issue with icons not appearing in my contact.html but with Safari do you have any solutions for me as well