Css not working all the time : I created a webpage with a dynamic footer. In the footer I have a facebook icon. when I preview the page the image does not appear. All other css is working fine except for the footer. Could anyone tell me what I am missing?

My footer template:

    <footer>
    		<div class="icon-text">
    			<div class="icon-text-text">
    				<ul class="footer-nav">
    					<li><a href="tearms.php">Terms and Conditions</a></li>
    					<li><a href="shipping_info">Shipping Information</a></li>
    				</ul>
    			</div>
    		</div>
    		<div class="icon-text">
    				<p class="email_text">Follow me on</p>
    				<a href="#">
    					<img class="social-icon" src=../icons/facebook.png" 
    alt="Facebook">
    				</a>>
    	</footer>
    	<footer class="second">
    		<p>&copy; All Rights Reserved</p>
    	</footer>
    	<!--End of Footer Section-->

Here is my css for the footer section:

    footer  {
    	background-color: pink;
    	border: 2px solid black;
    	box-shadow: 5px 5px 3px rgba(0, 0, 0, .65);
    	width: 1350px;
    	max-height: 300px;
    	overflow: hidden;
    }
    .icon-text {
    	width: 50%;
    	float: left;
    	text-align: justify;
    	text-align: center;
    }
    .icon-text-text {
    	font-size: 150%;	
    }
    img.social-icon {
    	height: 45px;
    	width: 45px;
    }
    .email_text {
    	font-size: 150%;
    }

And here in the php on the index page to add  the footer:

    <?php include_once("templates/template_footer.php"); ?>

There are other things wrong with the footer like I can't get the wording to move to the left but the image is whats important. Any ideas on how to fix this?