Adding social media icons into the header – css problems

Hi there, I am trying to put some social media icons into the heeader of this site to the right of the main nav:
https://woo.stimulusdesigns.co.nz/

I have inserted this into the header.php:

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

<div class="two columns" id="top-social">
<a href="#">f </a>
<a href="#">t </a>
<a href="#">u </a>
</div></div><!-- header-container-3 -->
<?php

and using this css to style the icons but the background images are just not showing up:

.top-fb {line-height: 40px; padding-right: 40px; text-align:right;}
.top-fb a { background-image: url(images/f-top.gif); background-repeat: no-repeat; width: 40px; height: 47px; padding-right: 2px; display: inline-block; color: #7a7a6b; background-position: 0px 0px; }
.top-fb a:hover { background-position: -40px 0px; color: #000000; }

.top-tw {line-height: 0px; padding-right: 40px; text-align:right;}
.top-tw a { background-image: url(images/tw-top.gif); background-repeat: no-repeat; width: 40px; height: 47px; padding-right: 2px; display: inline-block; color: #7a7a6b; background-position: 0px 0px; }
.top-tw a:hover { background-position: -40px 0px; color: #000000; }

.top-ut {line-height: 0px; padding-right: 0px; text-align:right;}
.top-ut a { background-image: url(images/ut-top.gif); background-repeat: no-repeat; width: 40px; height: 47px; padding-right: 2px; display: inline-block; color: #7a7a6b; background-position: 0px 0px; }
.top-ut a:hover { background-position: -40px 0px; color: #000000; }

Can some tell me why the background images rea not appearing? Something with my php, or is the selector wrong in the css. I am not an expert coder. A developer orginally had just an FB icon in there using this code:

<div class="one column" id="top-fb"><a href="#">f </a></div>
</div></div><!-- header-container-3 -->
<?php

and this css:

#top-fb{ display: none; }
#top-fb {line-height: 40px; padding-right: 100px; text-align:right;}
#top-fb a{ background-image: url(images/f-top.gif); background-repeat: no-repeat; width: 40px; height: 47px; padding-right: 2px; display: inline-block; color: #7a7a6b; background-position: 0px 0px;
}
#top-fb a:hover{ background-position: -40px 0px; color: #000000; }