body {
font-family: 'Open Sans', sans-serif;
background: #20b2aa;
}
h1 {
font-size: 40px;
color: white;
background: black;
width: 600px;
margin: auto;
}
.info {
background: white;
width: 600px;
height: 150px;
margin: auto;
}
#phoneNumber, #emailAddress {
padding-top: 5px;
padding-bottom: 5px;
}
img {
background: red;
}
p {
background: green;
}

<h1>Contact Me</h1>
<div class="info">
<h3>Eugene</h3>
<img id="phoneImage" src="img/phone.png">
<p id="phoneNumber">(800) 123⑷000</p>
<img id="envelopeImage" src="img/envelope.png" alt="">
<p id="emailAddress">[email protected]</p>
</div>

您可使用未订购的列表，并以某种方式将图标和文本添加到列表项目中。那多是 img 在 - 的里面 li 在旁边的文本中，您可以将更多的CSS线路与图标作为伪元素。这样，如果您需要在其他地方重新使用图标/联系格式，则只需要在 li.

.contact-info {
margin: 0;
padding: 0;
list-style: none;
}
.contact-info .phone::before,
.contact-info .email::before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 0.25rem;
vertical-align: middle;
}
.contact-info .phone::before {
background-image: url( 'http://placehold.it/10x10/fc0' );
}
.contact-info .email::before {
background-image: url( 'http://placehold.it/10x10/' );
}

<h1>Contact Me</h1>
<h3>Eugene</h3>
<ul class="contact-info">
<li class="phone">(800) 123⑷000</li>
<li class="email">[email protected]</li>
</ul>