I'm trying to display multiple icons and text in one line, side by side. I'm currently using the code block and I'm getting icons above the text instead of next to each other. I've attached what I'm seeing vs what I'm trying to accomplish. Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Icons and Text on the Same Line</title>
<!-- Include Google Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
/* Optional: Add some styling to adjust the layout */
body {
font-family: 'Arial', sans-serif;
margin: 20px;
}
.icon-container {
display: flex;
justify-content: center;
text-align: center;
}
.icon {
display: inline-block;
vertical-align: middle; /* Align the icons vertically */
margin-right: 10px; /* Adjust spacing between icon and text */
}
</style>
</head>
<body>
<!-- Multiple Icons and Text on the Same Line -->
<div class="icon-container">
<div>
<div class="icon">
<i class="material-icons">star</i> <!-- Replace with your desired Material Icon name -->
</div>
<div class="text">
Your text goes here.
</div>
</div>
<div>
<div class="icon">
<i class="material-icons">favorite</i> <!-- Replace with another Material Icon name -->
</div>
<div class="text">
Another text here.
</div>
</div>
</div>
</body>
</html>