我正在尝试在一个圆圈内创建fontawesome图标,并且我使用了边框CSS来实现。但是,对于不同的字体图标,边框不是圆形的,它会更改某些图标的形状,例如facebook。
我有以下代码段,其中Facebook边框不是圆形的。您能否让我知道如何为所有图标实现圆形(精确的圆圈)边框,而不论其大小如何(事件推特和服务器图标看起来不像是统一的圆圈)?
https://jsfiddle.net/1d7fvLy5/1/
i.fa {
margin: 0.5em;
font-size: 4em;
color: #303030;
border: 2px solid #303030;
border-radius: 50%;
padding: 0.5em;
transition: all .5s ease;
}
i.fa:hover{
color:lightblue;
border: 2px solid lightblue;
cursor:pointer;
}
将width: 1em;
和text-align: center;
添加到i.fa
应该可以。
如果需要,您可以使用fontAwesome的堆栈图标功能,如下所示:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
这里是小提琴:https://jsfiddle.net/1d7fvLy5/2/
这是fontAwesome http://fontawesome.io/examples的示例页面>
要制作一个完美的圆,您只需要一个正方形而不是一个矩形。
尝试这种方式: