私は「フラット デザイン」の Web サイトに取り組んでおり、シンプルなアイコンを使用することにしました。白いオーバーレイ画像は同じままで、シンプルアイコンの背景を暗くしたかったのです。それで、リストを作成しました（ナビゲーションバーです）。また、リスト アイテム内にアンカーを配置します。背景画像をアイコンとしてアンカーに設定し、リスト項目の背景色を好きなように設定してみました。また、リスト項目にトランジションを追加して背景色を変更しようとしましたが、うまくいかなかったので削除しました。サイト全体の CSS は次のとおりです。
div#nav{
float:right;
width:auto;
height:37px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.3);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-top:102px;
margin-left:2px;
}
#nav ul{
padding:0;
list-style:none;
margin:0;
}
#nav ul li{
width:32px;
height:32px;
margin-left:15px;
display:inline-block;
background-color:#000000;
border:0;
}
#nav ul li a{
z-index:10;
}
#facebook{
width:32px;
height:32px;
background-image:url('images/facebook.png');
}
HTML は次のとおりです。
<div id="nav">
<ul>
<li><a id="facebook" ></a></li>
<li><a id="twitter" ></a></li>
<li><a id="youtube" ></a></li>
</ul>
</div>
CSS では、id "twitter" または "youtube" のスタイリングは含めませんでした。誰でもシンプルなアイコンを表示させ、トランジションを機能させることができますか? シンプルなアイコンを提供します。アイコン画像は、CSS ファイル自体を含む「_css」という別のフォルダー内の「images」というフォルダー内にあります。
https://raw.github.com/danleech/simple-icons/master/icons/facebook/facebook-32.png
