首页 > 解决方案 > 在锚元素内移动图标不起作用?

问题描述

我正在尝试在锚元素中移动图标而不以任何图标为目标,但它不起作用..

我真的很感激你们任何人能给我的任何信息!

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>

标签: htmlcss

解决方案


为图标添加行高

a i {
  line-height: 5rem;
}

推荐阅读