navbarの "contact button"のための丸い棒を作る

Question

私は連絡先ボタンのようなものを作る必要があります。私はこれを何と呼ぶべきか正確にはわからない。私は、このイメージがあります

を私は作っ：

誰かが助けてくださいだろうか？私はdivの中に画像を入れて、その背景を変更し、その半径で何かをしようとしたが、それはうまくいきませんでした:(

HTML：

<i style="font-size:24px" class="fa">&#xf230; | </i> 
<i style="font-size:24px" class="fa">&#xf232; | </i> 

はCSS：

#menu1 i { 
    width: 30px; 
    font-weight: 700; 
} 

Answer 1

あなたの投稿を編集し、あなたが現在持っているもののためのコードを記載してください。このhttps://jsfiddle.net/ryuchix/w9tohLs2/1/

<div id="menu1"> 
<span class="fa fa-facebook"></span>|<span class="fa fa-phone"></span>| 
<p>Fone: 11 3854-0200</p> 
</div> 

CSS

#menu1 { 
    width: auto; 
    border-radius: 5px; 
    background: blue; 
    color: #fff; 
    padding: 10px; 
    border-radius: 50px; 
} 
#menu1 span { 
    padding-right: 10px; 
    padding-left: 10px; 
} 
#menu1 p { 
    padding-left: 10px; 
    display: inline; 
} 

Answer 2

その後、ちょうどあなたがあなたのCSSで「私は＃のMENU1」を定義するとき、あなたの「I」separatelの両方をフォーマットするしているあなたのCSSに

を＃1 MENU1を呼び出す<div id="menu1"></div>でご<i></i>をラップしてみてくださいy。あなたがしたいことは、それらを同じ箱の中に入れることです。あなたはそのフォーマットを適用しています。

#menu1 { 
 
    width: 100px; 
 
    border: 4px solid green; 
 
    border-radius: 5px; 
 
}

<div id="menu1"> 
 
    <i class="fa fa-facebook">|</i><i class="fa fa-phone">|</i> 
 
</div>