素人ときどき玄人

まずはHTMLタグです。

<ul>
    <li><a class="print" href="#">印刷</a></li>
    <li><a class="mail" href="#">メール</a></li>
    <li><a class="comment" href="#">コメントを書く！</a></li>
</ul>


これに対して以下のCSSを書いてください。


li { display:inline; }
ul li a  {
    display: inline-block;
    padding-left: 17px;
    line-height: 12px;
}
ul li a.print  { background:url(print.png) no-repeat; }
ul li a.mail  { background:url(mail.png) no-repeat; }


アイコンの位置は「line-height」君が鍵を握っています。
文字の大きさに合わせて微調整してみてください。


文字が不要の時は上記のCSSに加えて以下を追加してください。

ul li a.print,
ul li a.mail  {
    width:12px;
    height:12px;
    text-indent:-9999px;
}

「text-indent」がものすごい数字ですが
これで文字をブラウザーの外にふっ飛ばしている訳です。


どちらの設定も「display: inline-block;」が重要です。
高さと幅の指定をしていても inline-block になっていないと
アイコンが表示されませんのでご注意を！


でもこの子、古いブラウザーでは対応されないので
クロスブラウザ（あらゆるブラウザで正常に動作し閲覧できること）を目指している方は
以下のサイトを参考に対策してくださ〜い。


【参考サイト】
CSS-EBLOG
不特定の数の横に並ぶブロック要素をセンタリングさせる