Question

我想要设置图标的背景样式。我的代码给了我一个蛋形但垂直，我希望蛋形是水平的。此外，“蛋”完全覆盖了我的图标。这可能吗？

更新了小提琴... Fiddle

HTML：

<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>

CSS：

.car .fa-calculator {
    color:black;
    font-size:200px;
    background-color:red;
    display:block;
    position:relative;
    border-radius:80%
}

Answer 1

使用此CSS将起作用

.car .pull-left i {
    color:black;
    font-size:200px;
    background-color:red;
    display:block;
    position:relative;
    border-radius:80%;
    height:100px;
    width:80px;
}

Answer 2

这个怎么样;

.car .fa-calculator {
    color:black;
    font-size:200px;
    background-color:red;
    display:block;
    border-radius:50%;
    padding:.5em;
    width:1.6em;
    text-align:center;
}

Answer 3

我希望蛋形是水平的。此外，“鸡蛋”完全覆盖了我的图标。

对于'egg'形状，元素必须宽于高（如果我们使用border-radius）。

因此设置不均匀的填充似乎是一种选择。

.car .fa-calculator {
    color:black;
	font-size:100px;
	background-color:#FF0000;
    position:relative;
    border-radius:50%;
    padding: .2em .4em; /* adjust as required */
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>

图标样式背景

3 个答案: