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 Introduction to HTML and CSS (2016) Adding a New Web Page Set up an HTML Document

Posted by Larry Gonzales
Larry Gonzales
6,065 Points

Social icons won't show up on preview.

I'm unable to see social icons (twitter,linkedin.svg) files once I preview code, everything else shows up fine except the social icons. I'm using Atom as my text editor.

Larry Gonzales
Larry Gonzales
6,065 Points

This is the html.index code....................(I have a folder name images that has the .svg files)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Larry Gonzales's Profile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
  <body>

    <div class="main-nav">
        <ul class="nav">
          <li class="name">Larry Gonzales</li>
          <li><a href="#">Home</a></li>
          <li><a href="resume.html">Experience</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <header>
      <img src="images/Larry G.jpg" alt="Photo of Larry Gonzales" class="profile-image">
      <h1 class="tag name">Hello, I’m Larry.</h1>
      <p class="tag location">My home is San Antonio, Texas.</p>
    </header>

    <main class="flex">
      <div class="card">
        <h2 class="card-title">Background</h2>
        <p>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.</p>
        <p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
        <ul>
          <li>To learn more, <a href="resume.html">view my resume.</a></li>
        </ul>
      </div>

      <div class="card">
        <h2 class="card-title">Goals</h2>
        <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
        <ul class="skills">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Ruby</li>
          <li>Rails</li>
        </ul>
        <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
      </div>

    </main>
    <footer>
      <ul>
        <li><a href="#" class="social twitter">Twitter</a></li>
        <li><a href="#" class="social linkedin">LinkedIn</a></li>
      </ul>
      <p class="copyright">Copyright 2015, Larry Gonzales</p>
    </footer>
  </body>
  </html>

CSS Code....................................................................

/* Global Layout Set-up */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #222;
  background: #f7f5f0;
}
/* Link Styles */

a {
  text-decoration: none;
  color: #0499ff;
}
a:hover {
  color: #6633ff;
}

/* Section Styles */

.main-nav {
  width: 100%;
  background: black;
  min-height: 30px;
  padding: 10px;
  position: fixed;
  text-align: center;
}
.nav {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}
.nav .name {
  display: none;
}
.nav li {
  padding: 5px 10px 10px 10px;
}
.nav a {
  transition: all .5s;
}
.nav a:hover {
  color: white
}

header {
  text-align: center;
  background: url('https://s2.postimg.org/utvvgy2q1/chris-barbalis-101882.jpg') no-repeat top center ;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}
header {
  line-height: 1.5;
}
header .profile-image {
  margin-top: 50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid white;
  transition: all .5s;
}
header .profile-image:hover {
  transform: scale(1.2) rotate(360deg);
}
.tag {
  background-color: #efefef;
  color: black;
  padding: 10px;
  border-radius: 5px;
  display: table;
  margin: 10px auto;
}
.location {
  background-color: #222;
  color: white;
}
.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}
.card:hover {
  border-color: #ff99ff;
}

ul.skills {
  padding: 0;
  text-align: center;
}

.skills li {
  border-radius: 6px;
  display: inline-block;
  background: #ff9904;
  color: white;
  padding: 5px 10px;
  margin: 2px;
}

.skills li:nth-child(odd) {
  background: #0399ff;
}

footer {
  width: 100%;
  min-height: 30px;
  padding: 20px 0 40px 20px;
}

footer .copyright {
  top: -8px;
  margin-right: 20px;
  font-size: .75em;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-block;
}

a.social {
  display: inline-block;
  text-indent: -9999px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  opacity: .5;
  transition: all .25s;
}
a.twitter {
  background-image: url(images/twitter.svg); - with or with out single/double quotes, it still won't work.
}
a.linkedin {
  background-image: url(images/linkedin.svg); - with or with out single/double quotes, it still won't work.
}

a.social:hover {
  opacity: 1;
}
.clearfix {
  clear: both;
}

/* Styles for larger screens */
@media screen and (min-width: 720px) {

  .flex {
      display: flex;
      max-width: 1200px;
      justify-content: space-around;
      margin: 0 auto;
  }

  header {
    min-height: 450px;
  }

  .nav {
    max-width: 1200px;
  }

  .nav .name {
    display: block;
    margin-right: auto;
    color: white;
  }

  main {
    padding-top: 50px;
  }

  main p {
    line-height: 1.6em;
  }

  footer {
    font-size: 1.3em;
    max-width: 1200px;
    margin: 40px auto;
  }

  .card-title {
    text-align: center;
    border: solid black 3px;
    border-radius: 10px;
  }

1 Answer

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Check again if you don't get any *path errors

google chrome:: Open Developer Tools F12, Ctrl + Shift + I (pc). Cmd + Opt + I (mac) https://developers.google.com/web/tools/chrome-devtools/shortcuts

What error? (red alert)

images/twitter.svg Failed to load resource: the server responded with a status of 404 ()

Thats its. This, for example, will work fine.

a.linkedin {
  background-image: url('https://dummyimage.com/30/30/fff.jpg');
background-repeat: no-repeat;
}

Codepen (later i will delete this codepen): https://codepen.io/siton/pen/rwqabL