我试图在锚元素中移动图标,而不以任何图标为目标,但这不起作用。。
我真的很感激你们能给我任何关于它的信息!
html {
font-size: 2.5em;
}
body {
background-color: #fff;
padding: 25px;
text-align: center;
}
.icon-button {
background-color: orange;
border-radius: 2.6rem;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
text-align: center;
width: 2.6rem;
}
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="<head>
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i></a>
添加图标的行高
a i {
line-height: 5rem;
}