css - cssを使用して個別の画像とテキストを含む液体水平ナビゲーションボタン

Question

画像付きのリンクを含む液体ナビゲーション バーを使用することは可能ですか。左に画像、右にテキストのレスポンシブリンクを作成しようとしています。ウィンドウのサイズが変わると、ボタン (リンク) のサイズも変わります。CSSでこれを行うことをお勧めします。

私がこれまでに試したことは、次のことです。

<div style="height:62px;margin-left:60px;border:solid 1px #FFFFFF;">
    <ul class="main_nav">
        <li>
            <a href="#me">
                <img src="img/avatar/me.png" alt="me">
                Me
            </a>
        </li>

        <li>
            <a href="#guide">
                <img src="img/avatar/spotlight.png" alt="guide">
                Guide
            </a>
        </li>

        <li>
            <a href="#downloads">
                <img src="img/avatar/downloads.png" alt="downloads">
                Downloads
            </a>
        </li>
    </ul>
<div>