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

Watch Video

Posted January 24, 2015 11:40pm by

Problem with data-icon!

Hey i have added my icons so that they are next to my links, but when i set overflow: hidded; to my nav links element it doesnt make the icon disapear?

anyone have an idea how to fix this?

heres the code

/******************
NAVIGATION LINKS STYLING
*************************/

.nav a {
    padding: 10px 40px 10px 40px; 
    width: 100%;
    position: relative;
}


.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
  top: px;
  left: -30%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
  position: relative;
    display: inline-block;
    font-size: 14px;
}


/*NAVIGATION SELECTORS*/

.nav {
    text-align: right;
    width: 50%;
    float: right;
    padding-bottom: 2%;
  margin-top: 5%;

}

AND THE HTML

<nav class="nav">
          <ul>
            <li><a class="nav-links selected" href="index.html" data-icon="&#xe900;">Home</a></li>
            <li><a class="nav-links" href="about.html">About</a></li>
            <li><a class="nav-links" href="contact.html">Contact</a></li>
          </ul>
        </nav>

January 24, 2015 11:53pm

I notice that you don't have a top property set correctly for your nav a::before selector. You need to give that top property some value instead of just "px".

If that does not fix your problem, please come back and post your full code. It will help us better help you if we have more than just a snippet of code. Thanks!

January 25, 2015 12:07am

heres the full css code for the nav and header

:root {
    font-family: 'Roboto Slab', serif;
    min-height: 98%;
    border-bottom: 40px solid #0c4750;
}

* {
  -webkit-border-radius
}

/*BODY SELECTOR*/


body {
    height: 100%;
    background: hsl(188, 74% , 21%);
    background: -webkit-linear-gradient(#0e535d , #8ce1ee);
    background: -moz-linear-gradient(#0e535d , #8ce1ee);
    background: -ms-linear-gradient(#0e535d , #8ce1ee);
    background: -o-linear-gradient(#0e535d , #8ce1ee);
    background: linear-gradient(#0e535d , #8ce1ee);
    color: #FFFFFF;
    line-height: 1.6;
}

/*THE CONTENT AREA*/
.container {
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    padding: 0 5%;
}

/* STYLES THE h1 and h2 and paragraph on the page */

h1, h2 {
    margin-bottom: .28em;
    font-weight: bolder;
    font-size: 28px;
    font-family: 'Droid Serif', serif;
    text-shadow: 1px 1px 1px black;



}

p {
    font-weight: bold;
    font-size: 18.88px;
    margin: 0.8em 0;


}

@font-face {
  font-family: 'icomoon';
  src:url('../fonts/icomoon.eot');
  src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.woff') format('woff'),
      url('../fonts/icomoon.ttf') format('truetype'),
      url('../fonts/icomoon.svg#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;

}

/*************
HEADER STYLING
*******************/

header {
   float: left;
   position: relative;
   margin: 0 0 40px 0;
   padding: 0 0 0 0;
   width: 100%;
   min-height: 100%;
   overflow: hidden;
}


header {
    background:#0b3f47;
    border-color: #0b3f47;

}

header {
    border-bottom: 6px solid #082f35;
    border-top: 6px solid #082f35;
    margin-bottom: 110px;
}

.image {
  width: 50%;
  float: left;
}


.intro-pic {
    position: relative;
    display: block;
    margin: auto 0;
    text-align:center;
    top: -5px;
    bottom: -5px;
    left: -2px;
}


.image {
  top: 50%;
  bottom: 50%;
}



/*STYLING FOR THE OTHER LINKS ON THE PAGE*/

a.Other-links {
    text-decoration: none;
    color: #101010;
}

a.Other-links:hover {
   text-decoration: underline;
   color:#000;
}




/******************
NAVIGATION LINKS STYLING
*************************/
a.nav-links  {

  background-color:#006b8f;
  height: 100%;
  margin: 5px 0px 0px 2px;
  padding: 0px 5px 0px 5px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  text-decoration:none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-shadow: 1px 0 1px black;
  border: 2px solid black;
}

a.nav-links:hover {
    background-color:#00506b;   
    -moz-box-shadow: 0px 0px 1px black; 
    -webkit-box-shadow: 0px 0px 1px black;
    box-shadow: 0px 0px 1px black;

}

a.nav-links.selected {
  background-color:#00506b;
}

.nav a {
    padding: 10px 40px 10px 40px; 
    width: 100%;
    position: relative;
    overflow: hidden;
}


.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
  left: -30%;
}

.nav ul  {
    list-style: none;   
    margin: 0px 28px;
    padding: 0;
}

.nav li {
  position: relative;
    display: inline-block;
    font-size: 14px;
}


/*NAVIGATION SELECTORS*/

.nav {
    text-align: right;
    width: 50%;
    float: right;
    padding-bottom: 2%;
  margin-top: 5%;

}

2 Answers

January 25, 2015 12:39am

In your * selector, you don't have -webkit-border-radius set properly. You also need to put that top property back into your .nav a::before rule. It just wasn't set right when you first had it. You should set it to 10px as Guil does in the video. As far as errors go, that's all I'm seeing for your CSS. If fixing those errors doesn't fix the problem, we will also need your HTML file.

January 25, 2015 12:57am

hey i did put the top to 10px but it did not help, heres my html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Erdrag's Official Website">
    <meta name="author" content="Erdrag">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:700|Roboto+Slab' rel='stylesheet' type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Erdrag Official Website</title>
</head>
 <body>
     <header class="main-header">
        <div class="image">
          <a href="index.html">
            <img class="intro-pic img" src="img/mainlogo.png" title="Home" alt="logo">
          </a>
        </div>
        <nav class="nav">
          <ul>
            <li><a class="nav-links selected" href="index.html" data-icon="&#xe900;">Home</a></li>
            <li><a class="nav-links" href="about.html">About</a></li>
            <li><a class="nav-links" href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>  
      <div class="container"> 
        <div class="work">
          <h2>What you will see!</h2>
          <p>Some things that you can / are going to see on this website,
            in the future is me creating stuff for fun. like websites, simple
            visual programming games and more! (Read more about it in the "About" section)

            A great site i use to learn about all kind of different things is the<a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> website.</p>
        </div>
        <div class="still-learning">
         <h2>Still learning!</h2>
         <p>Im still learning all the things about Web development, web design, and much more, and you never run out of things to learn. Some sites i can reccomend that has great tutorials and forums is <br> <a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> &amp; <a class="Other-links" href="http://sololearn.com" target="_blank">Sololearn</a></p>
        </div>
        <div class="github-mobile">
        <a href="#" target="_blank"><img class="github-mobileimg" src="img/github.png" title="Github Profile!" alt="github profile"></a>
        </div>
         <br>
        <footer class="copyright">
          <a href="#"><img src="img/facebook2.png" title="Facebook" class="social-icon" alt="Facebook Logo"></a>
          <a href="#" target="_blank"><img src="img/twitter2.png" title="Twitter" class="social-icon" alt="Twitter Logo"></a>
          <a href="http://teamtreehouse.com/erdragerdragsson"><img src="img/mail2.png" title="mail" class="social-icon" alt="Mail icon"></a>
          <a href="https://www.google.se/#q=not+yet"><img src="img/instagram.png" title="Instagram or sumtin" class="social-icon" alt="Instagram or sumtin"></a>
          <p class="copyright-text">&copy; Erdrag 2015, All rights reserved.</p>
        </footer> 
        <div id="date-stamp"> 
        <script LANGUAGE="Javascript">

            var stampdays = new Array( "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");

             // Month Names - Guess what this array does. 0..11 to the system clock month

            var stampmonths = new Array( "January","February","March","April","May","June","July","August","September","October","November","December");

             // GRABS the Date info from your System clock when your Browser reads  enters the page.

            var thedate = new Date();

            //Gets the Translated Arrays written to the webpage for viewing. Remember you can use this for other things, too
            document.write(stampdays[ thedate.getDay()] + ", " + stampmonths[ thedate.getMonth()] + " " + thedate.getDate() + ", " +   thedate.getFullYear());
          </script>   
          </div> 
      </div>
      <div class="github-span">
      <a href="https://github.com/Erdrag" target="_blank"><img class="github" src="img/github.png" title="Github Profile!" alt="Github"></a>
      <img src="img/chat.png" class="github-chat" alt="Chat bubble">
    </div>
  </body>
</html>

January 25, 2015 1:25am

It seems that the only issue there is (after fixing the -webkit-border-radius and top properties in the CSS) was changing the data icon. I changed the home icon to the one that Guil uses .

EDIT: I figured out why this works, as well. It looks as though you got the code for the "home" icon from the http://icomoon.io site which lists one of those home icons as . This code, though, is for the new version of icomoon which we aren't using. We are using the old version of icomoon and the codes are different for the old version, which is why new codes won't show up.

January 25, 2015 1:36am

i added the the code guil used, but i cant see the icon even if i remove the overflow hidden property

and when i add the hover state like this, nothing happends

.nav a:hover::before {
  left: 10%;
}

do i need to download the files for the icons guil is using or does it matter?

January 25, 2015 1:52am

After changing the icon to  I was able to see the icon clearly. It was off from the button of course. Did you read my updated comment?

January 25, 2015 1:55am

I was able to make a neat transition, though, by setting this:

.nav a::before {
  font-family: 'icomoon';
  content: attr(data-icon);
  color: #fff;
  position: absolute;
//Changed left to -1000%
  left: -1000%;
  top: 10px;
  transition: .4s;
}

January 25, 2015 1:59am

i still cant see the icon hmm :/

i changed the data-icon back to the one i had first and now the transition works, but i does not overflow hidden

for the data-icon guil used, to i need to download something?

January 25, 2015 2:12am

Guil is using an old version which is packaged as part of the project files. I don't know where you got your icomoon files, but that's where I got the ones I used. I assumed that you had done the same thing since you are using some of the same code. With those icomoon files, though, I had to use the old codes that Guil uses to get them to even show up. I honestly have no idea what to do next.

January 25, 2015 2:16am

i choosed 3 icons at icomoon then downloaded a file with 4 differents format (.eot .woff .ttr .sbg)

does that effect anything? did guil use different format files for those icons he used, or does it even matter?

Do you know anyone who might know whats going on? Guil Hernandez ?

January 25, 2015 2:20am

It may be that I'm an idiot, and I forgot how icomoon worked. I don't even think it's an old version per se, actually. I think that the ones that Guil includes only have those icons in the files that he uses on the page. That's why I was able to use that code, and you weren't. I feel pretty dumb right now! LOL!

January 25, 2015 2:34am

oh okey, that explains pretty much, but i still dont get how the overflow thing isnt working? :/

January 25, 2015 2:36am

The overflow issue may be because Guil's layout is using flexbox and yours is not. Then again, I really don't know. Good luck, erdrag!

January 25, 2015 3:12am

yeah, i fixed it sort off, i displayed it none, then at hover i displayed it inline, but now the transition is gone but anyway,

thanks for helping me! i appreciate it:)

EDIT: I fixed it with the z-index property!

January 25, 2015 3:31am

Yay! :D It seems like you deserve your own best answer :P

January 26, 2015 12:12pm

one thing more :P do you have any idea why the icons transitions leave a trail ?

January 26, 2015 2:51pm

If you're still using that "left: 1000%" property, the trail is from where the icon is placed all the way off the screen and transitions to the second location. If you don't like that, you could set the display of that before declaration to none, and then just have it display on hover.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

erdragerdragsson

erdragerdragsson

Problem with data-icon!

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

2 Answers

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons

erdragerdragsson

erdragerdragsson

Marcus Parsons

Marcus Parsons