在导航栏中为“联系人按钮”创建一个圆角栏

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

尝试将<i></i>包裹在<div id="menu1"></div>中，然后只需拨打css中的＃menu1

当你在你的CSS中定义'＃menu1 i'时，你正在分别形成你的'i'。然后你想要做的是将它们包含在同一个盒子里。您正在应用格式。

#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>

Answer 2

试试这个https://jsfiddle.net/ryuchix/w9tohLs2/1/

function greet(name) {
    console.log(window.name);
    name = name || '<Your name here>';
    console.log('Hello ' + name);    
}
var a = "ton";
var name = "test"
greet(a);

CSS

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