css3でボタンの中にアイコンを表示するには？

質問

css3でリンクボタンのデザインを作っています。

グラデーションや角の丸め、影の付け方はわかりました。

しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。

アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？
（画像の赤い矢印で示した部分です）

作っているcssは以下のような感じです。

a{
　　border-top: 1px solid #57b4ff;
　　border-left: 1px solid #57b4ff;
　　border-right: 1px solid #0d78ff;
　　border-bottom: 1px solid #0d78ff;

　　-webkit-border-radius: 3px;
　　-moz-border-radius: 3px;
　　border-radius: 3px;

　　-webkit-box-shadow: 1px 1px 2px #a2c1dc;
　　-moz-box-shadow: 1px 1px 2px #a2c1dc;

　　background: -moz-linear-gradient(top, #fff, #ccc);
　　background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
}

よろしくお願い致します。

回答No.1

ORUKA1951 · ベストアンサー

ＨＴＭＬが、
＿＿<div class="header">
＿＿＿＿<div class="nav">
＿＿＿＿＿＿<p>このページのインデックス</p>
＿＿＿＿＿＿<ol>
＿＿＿＿＿＿＿＿<li><a href="">ミツバチの種類</a></li>
＿＿＿＿＿＿＿＿<li><a href="">ミツバチの巣</a></li>
＿＿＿＿＿＿＿＿<li><a href="">ローヤルゼリーとは</a></li>
＿＿＿＿＿＿</ol>
＿＿＿＿</div>
＿＿</div>

だとすると、

div.header div.nav ol,div.header div.nav ol li{
＿＿display:block;list-style:none;
＿＿margin:0;padding:0;
＿＿line-height:40px;text-align:center;
}
div.header div.nav ol li{margin: 5px 10px;float:left;width:12em;}
div.header div.nav ol li a{
＿＿display:block;width:100%;height:100%;
＿＿text-decoration:none;position:relative;
＿＿border:solid 1px #57b4ff;
＿＿border-color: #57b4ff #0d78ff #0d78ff #57b4ff;
＿＿border-radius: 3px;
＿＿background: -moz-linear-gradient(white, silver);
＿＿box-shadow: 2px 2px 2px 0;
}
div.header div.nav ol li a:before,
div.header div.nav ol li a:after{
＿＿position:absolute;
}
div.header div.nav ol li a:before{content:"■";font-size:30px;left:0;}
div.header div.nav ol li a:after{content:"＞";right:0;}

とかかな？？？テストしてません。また、webkit系ブラウザへの対策はしてありません。

content:"■";
は、
content:url([画像ファイル]);
とするだけです。

★まず仕様書に目を通す癖をつけましょう。
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )

お礼

いつも的確なご回答ありがとうございます。
仕様書のそのページを探すのも、なかなかたどり着けずについ質問してしまいました…。
いちおう、ちょっと表示はヘンでしたがなんとなくやりたいことができました。
後はきちんとレイアウトができることと、webkitへの対応は自分で探してみたいと思います。

今回も助かりました！

回答No.2

ORUKA1951

なお、内容の追加は、CSS2.1のプロパティです。2.0より多少変更もありますので注意してください。(ブラウザベンダーはCSS2.1のほうを採用しています)
C.4.21 12.1 The :before and :after pseudo-elements ( http://www.d-toybox.com/spec/CSS2.1/appendixC/#q83 )
以降。

★CSS3の魅力はわかりますが、その前にCSS2.1をしっかり身につけておいたほうが良いです。
　ウェブなんて、しょせん「内容あって幾ら」の世界で、プレゼンテーションなんて二の次三の次・・です。自己満足の部分が多々あります。
　きちんと、文書構造にしたがってマークアップするようにしましょう。デザインは後からついて来るモノです。

お礼

いろいろとご指導ありがとうございました。
本業の傍らの勉強ですのでなかなか全て調べ尽くすのは不可能ですが
文章構造が重要だということはよくわかりました。
また何かありましたらよろしくお願い致します。