Issue
I can't display text after the icon. I tried to use float but isn't working.
Can u help me to solve it please? I can't find the solve on google, i tried this before asking
CSS File:
*{
margin: 0;
padding: 0;
}
header{
height: 70px;
background-color: darkgrey;
width: 100%;
}
i{
margin-top: 15px;
margin-left: 15px;
padding: 0px 3px 0px 3px;
border-radius: 10px;
border-style: solid;
border-spacing: 10px;
}
i:hover{
background-color: grey;
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titlu</title>
<script src="https://kit.fontawesome.com/768cd38b76.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<i class="fas fa-bars fa-2x"></i>
<h1>Titlu</h1>
</header>
</body>
</html>
Solution
display: flex;
align-items: center;
Just add that to the class and it should solve your problem. You can also remove margin-top in the "i" class to make you design neater.
Answered By - Ahmad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.