css - フッター内にタグを配置する

Question

これらのソーシャル アイコン画像をフッター内で移動する際に問題が発生しました。高さを 40px から 60px に増やすと画像全体が表示されますが、セクション サイズを変更せずにセクション内で画像を移動する方法がわかりません。

コードは以下です。私は困惑しています。助けてくれてありがとう。CSS:

.footer {
position:fixed;
/*Opacity start*/
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.8;
/*Opacity end*/ 
left:0px;
bottom:0px;
height:40px;
width:100%;
background:#333333;
}

 div.socialIcons ul li 
{
display: inline-block;
vertical-align:top;
padding-right: 10px;
padding-bottom: 5px;
float: right;
}

div.footer a
    {
    color:#441111;
    text-decoration:none;
    }
div.footer ul
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    list-style-type: none;
    }
div.footer p 
{
text-align: center;
font-size: 75%;
padding-left: 10em;
padding-top: .5em;
color: #ECECEC;

}

HTML:

<div class="footer">


<!--   *****   Social media icons   *****   -->
<div class="socialIcons">

    <ul id="profile">
        <li><a href="http://www.twitter.com/" title="Twitter"><img src="./design/twitter.jpg" alt="My Twitter" /></a></li>
        <li><a href="http://www.pinterest.com/" title="Pinterest"><img src="./design/pinterest.jpg" alt="My Pinterest" /></a></li>
        <li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="./design/linkedin.jpg" alt="Me on LinkedIn" /></a></li>
    </ul>
</div>
<p><i>&copy;2013</i></p?>