我是初学者，如何将这些图标变为蓝色标题？目前我对属性和特性还不太了解。我需要你的帮助才能将这些图标添加到 header 中。我希望我看起来像 { 欢迎（内嵌图标）}
<html>
<head>
<title>SAMPLE 1</title>
<style>
body {
background-color: rgb(240, 233, 233);
}
.header h1 {
color:rgb(255, 51, 0);
font-family:"Pacifico", cursive ;
padding-left: 30px;
}
.header {
background-color: #09e0f8;
padding:20px;
border-radius: 70px;
}
.social {
list-style-type: none;
display: inline;
padding:0;
margin-right: 10px;
float:right;
}
</style>
</head>
<body>
<header class="header"><h1>WELCOME</h1>
<ul>
<li class="social"><img class="insta" src="instagram.png" width="30px"></li>
<li class="social"><img class="face" src="facebook.png" width="30px"></li>
<li class="social"><img class="twi" src="twitter.png" width="30px"> </li>
</ul>
</header>
</body>
</html>
一种简单的方法是在物品的容器上使用
display:flex<html>
<head>
<title>SAMPLE 1</title>
<style>
body {
background-color: rgb(240, 233, 233);
}
.header h1 {
color:rgb(255, 51, 0);
font-family:"Pacifico", cursive ;
padding-left: 30px;
}
.header {
background-color: #09e0f8;
padding:20px;
display:flex;
border-radius: 70px;
align-items: center;
}
.social {
list-style-type: none;
display: inline;
padding:0;
}
</style>
</head>
<body>
<header class="header"><h1>WELCOME</h1>
<ul>
<li class="social"><img class="insta" src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdx-QjbrMwdgCSQMk4x2sP-iFXr0poxubFKg&usqp=CAU" width="30px"></li>
<li class="social"><img class="face" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdx-QjbrMwdgCSQMk4x2sP-iFXr0poxubFKg&usqp=CAU" width="30px"></li>
<li class="social"><img class="twi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdx-QjbrMwdgCSQMk4x2sP-iFXr0poxubFKg&usqp=CAU" width="30px"> </li>
</ul>
</header>
</body>
</html>只需确保调整您的图像以适合即可。
请注意，我还添加了
align-items: center;