Question

我试图在图标字体背景的中心使用我的箭头图标字体。

但它不起作用。因为我需要为我的图标字体箭头添加边距，但这个图标字体有背景，所以我对我的图标字体做了什么，我对我的背景做了...

任何人都知道如何解决这个问题？

我的问题说明了这个问题：

我的Html：

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <div class="unslider-arrow prev"><i class="fa fa-chevron-left"></i></div>
        <div class="unslider-arrow next"><i class="fa fa-chevron-right"></i></div>

我的css：

.unslider-arrow 
{
    display:inline-block;
    position:absolute;
}

.prev 
{
    top:95px;
    left:0px;
}

{
    top:95px;
    right:0px;
}

.prev >i{color:#000; font-size:1.5em; background:rgba(0,0,0,0.7); width:40px; height:40px;}
.next >i{color:#000; font-size:1.5em; background:rgba(0,0,0,0.7);width:40px; height:40px; }
.prev >i:hover{color:#ccc; cursor:pointer;}
.next >i:hover{color:#ccc;cursor:pointer; }
.next

Answer 1

将line-height: 40px;和text-align: center;添加到您的i元素。

它应该是您周围的父元素的高度，在您的情况下它是40px。

.prev >i,
.next >i {
    line-height: 40px;
    text-align: center;
}

Working Fiddle

问题在中心对齐图标字体

1 个答案: