In the last video, we added icons from Font Awesome, and in this one, we're going to style them.

Open the styles.css file and start building the style for nav-buttons. Let's choose a gray for the color, remove all text decorations, increase the font size to 1.9em to make it really big, and give plenty of margin space on the left.

#nav-buttons a {
    color: #bababa;
    text-decoration: none;
    font-size: 1.9em;
    margin-left: 30px;
}

The output now looks close to the original Pinterest page.

Next, we need to add some hover effects. We'll change the color to black, every time a mouse hovers on the icon.

Before that, I want to quickly show you how to pick the exact color used by Pinterest. Go to their homepage, right click, and choose the "Inspect" option. If you click on the icon, you can see the styles used, and here you can get the exact hexadecimal value used for the color.

Let's paste the same code for our hover effects too.

#nav-buttons a:hover {
    color: #5f5f5f;
}

This gives us the effect we want.

I think the headers look nice now.