中央のアイコンを含む仕切りは、幅の幅には適用されません。

Question

私のページの一部を分割し、2つの仕切線の間にアイコンを配置しようとしています。私は::beforeと::afterを使用する必要が把握ので、私はまったく機能していないようjsfiddleではこの

jsfiddle.net

i:after { 
    background-color: #999; 
    content: " "; 
    display: inline-block; 
    height: 3px; 
    margin: 0 0 8px 20px; 
    text-shadow: none; 
    width: 100%; 
} 

i:before { 
    background-color: #999; 
    content: " "; 
    display: inline-block; 
    height: 3px; 
    margin: 0 20px 8px 0; 
    text-shadow: none; 
    width: 100%; 
} 

を書きました。しかし、私がクロムでインデックスファイルを開くと、それはあるポイントまで動作します。それは、アイコンの左右に線を表示しますが、それはそれが全身のdivを埋めることはありません。どんなアイデアも素晴らしいだろう。

Answer 1

uはフォント素晴らしいを使用している場合uはあなたのメニューで、次のように

をアイコンを追加することができ、これは単なる例です。

<li><i class="fa fa-home"></i>Home</li> 
<li><i class="fa fa-about"></i>About</li> 
<li><i class="fa fa-contact"></i>Contact</li> 

私はjsfiddle上のファイルを参照してください。..フォントに関する

より - あなたはこれで見ることができますね。

http://fontawesome.io/