为什么只有文字变红，字体图标不变红？

来源：2-2 footer响应式效果

qq_鸭绿桥第一帅哥_0

2019-03-26 11:21:14

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/yidong.css">
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="app">
<div class="box"></div>
<div class="footer">
<div class="footericon iconactive">
<a href="#" class="icon_a">
<i class="fa fa-500px fa-lg"></i>
</a>
我的
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fa fa-500px fa-lg"></i>
</a>
我的
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fa fa-500px fa-lg"></i>
</a>
我的
</div>
<div class="footericon">
<a href="#" class="icon_a">
<i class="fa fa-500px fa-lg"></i>
</a>
我的
</div>
</div>
</div>
<script type="text/javascript" src="js/yidong.js"></script>
</body>
</html>


*{
	margin: 0;
	padding: 0;
	list-style: none;
}
a{
	text-decoration: none;
}
.footer{
	display: flex;
	position: fixed;
	bottom: 0;
	height: 54px;
	border-top: 1px solid #ccc;
	background: #fff;
	font-size: 12px;
	width: 100%;
	text-align: center;
}
.footericon{
	flex: 1;
	margin: 8px auto;
}
.iconactive{
	color: red;
}
i{
	/* color: red; */
}
.icon_a{
	display: block;
}

写回答

2回答