Ok my twitter icon does not show up on my About page. Here is the code. I checked in many times and don't see where it is broken. Also read my notes below, i have code in RED like something is broken. I don't see it!

.contact-info li.twitter a { <---- li shows in red a does as well background-image: url('../img/twitter.png'); }

/**************************************** Colors
*****************************************/

/* site body*/ body { <---- body shows in red background-color: #fff; color: #999; }

/green header/ header { <---- header shows in red background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { <---- nav shows in red background: #599a68; }

/* logo text*/ h1, h2 { <---- h1 h2 shows in red color: #fff; }

/links/ a { <---- a shows in red color: #6ab47b; }

/nav link/ nav a, nav a:visited { <---- nav a nav a shows in red color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Here is all the main.css in case you need to see it!

/**************************************** GENERAL
*****************************************/

body{ font-family: 'Lato', 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: 'Ubuntu', sans-serif; margin: 15px 0; 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: 900; padding: 15px 10px;

}

/**************************************** footer *****************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon{ width: 20px; height: 20px; margin: 0 5px; }

/**************************************** Page: Portofolio *****************************************/

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 *****************************************/

.profile-photo{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/**************************************** 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 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'); }

/**************************************** Colors
*****************************************/

/* site body*/ body { background-color: #fff; color: #999; }

/green header/ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text*/ h1, h2 { color: #fff; }

/links/ a { color: #6ab47b; }

/nav link/ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }