有人可以告诉我为什么border-radius:50%
属性不适用于所有图标吗?
我必须为每个脚本编写不同的填充设置,但我都希望这样做。
.social a {
font-family: "FontAwesome";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
line-height: 0;
width: 20px;
position: relative;
text-align: center;
color: white;
top: 62px;
left: 25%;
font-size: 22px;
padding: 20px;
cursor: pointer;
background-color: #2f5183;
border-radius: 50% !important;
transition: 0.3s;
text-decoration: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="social">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
</div>
演示:
https://jsfiddle.net/hqwg00qf/5/
最佳答案
可以,圆角是圆的。
问题在于将width
设置为inline
元素是行不通的(不能将内联元素的宽度/高度设置为)。将display: inline-block
添加到链接。
.social a {display: inline-block; ...}
https://jsfiddle.net/hqwg00qf/19/
关于html - CSS圆 Angular 不适用于所有图标,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49797685/