i want to make an icon before a text in header html-CodePudding

I want to make this icon before this text

I got this code in HTML

<div  > <img src="cir.png" style="height:30px;"/>  email things</div>

and this in styyle css

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  align-items: center;
  padding-left:100px;
  color: white;
  font-size: 3;
}

CodePudding user response：

Use <i> in the HTML for icons, you can mess around with its page placement in the CSS file

CodePudding user response：

You can do that by simply removing the grid configurations of your <style>, effectively having:

    <style>
        .header {
          background-color: gray;
          padding-left: 100px;
          color: white;
          font-size: 3;
        }
    </style>

Here's a snippet you can play with:
https://codesandbox.io/s/beautiful-framework-e5g9ci?file=/index.html:106-287

CodePudding user response：

I don't know how to do it grid, but if you use "display: flex;" you can get the result that you want.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
</head>
<style>
    .header {
        display: flex;
        align-items: center;
        background-color: gray;
        padding-left: 100px;
        color: white;
        font-size: 3;
    }

    .header img {
        margin-right: 10px;
    }
</style>

<body>

    <div >
        <img src="/icon.png" style="height:30px;" />
        <p>email things</p>
    </div>
</body>

</html>