html - ul 内の水平方向の画像とテキストのリンクを揃える

Question

次のリストの残りのリンクに画像を合わせるにはどうすればよいですか?

<div id="barra">
    <ul id="botoes">
        <li><a href="/o-meu-perfil"><img src="image.png" width="25" height="25"></a>
        </li>
        <li><a href="#">Perguntas</a>
        </li>
        <li><a href="/o-meu-perfil">Pesquisa</a>
        </li>
    </ul>
</div>

これはCSSです：

#barra {
    
    position:fixed;
    height:35px;
    border-bottom: solid 1px;
    top:50px;
    background: rgba(250, 0, 250, 0.75);
    border-radius: 2px;
}

#botoes li {
    display: inline-block;
    list-style-type: none;
    padding-right: 5px;
    vertical-align: top;
    line-height: 10px;
    
}

そして画像：

全体をバーの左側に揃えるにはどうすればよいでしょうか。コードはhttp://jsfiddle.net/pFBT9/1/で確認できます。