grxdesigner38 Posted December 28, 2023 Share Posted December 28, 2023 (edited) 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> Edited December 28, 2023 by grxdesigner38 submitted on accident without completion Link to comment
tuanphan Posted December 30, 2023 Share Posted December 30, 2023 You can add GG Material Icons code - text in same tag <div> <i class="material-icons">star</i> Your text here </div> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment