Bagaimana Agar Icon List Posisinya Sejajar dengan Baris Pertama Kata-kata di Sampingnya?

Salam hormat untuk para senior. Perkenalkan, saya Adnan Syafii, baru menyelesaikan pelajaran HTML di Sekolah Koding dan saat ini sedang mulai belajar CSS.

Saat ini saya mengelola sebuah website (<a href='https://alazharmemorialgarden.co'>https://alazharmemorialgarden.co</a>) dengan menggunakan Wordpress. Pada bagian footer saya membuat unordered list dan mengganti bullet default dengan icon dari Fontawesome.

Kode HTML yang saya gunakan:

 <ul class="fa-ul" id="widget-adnan">
  <li><i class="fa-li fa fa-map-marker"></i>Jalan Raya Peruri, Desa Pinayungan, Telukjambe Timur, Karawang 41361</li>
  <li><i class="fa-li fa fa-phone-square"></i>0267 863-0666</li>
</ul>

 <ul class="fa-ul" id="widget-adnan">
  <li><i class="fa-li fa fa-building"></i>Komplek Radio Dalam Square Blok 1B
Jalan Radio Dalam Raya, Gandaria Utara, Kebayoran Baru, Jakarta Selatan 12140</li>
  <li><i class="fa-li fa fa-phone-square"></i>021 2905-4977</li>
<li><i class="fa-li fa fa-whatsapp"></i>0811-170-0037</li>
</ul>

Kode CSS yang saya gunakan:

 #widget-adnan {
    margin-left: 20px;
}

Hasilnya... Pada gambar di atas, terlihat icon berada lebih tinggi dibandingkan kata-kata di sampingnya.

Yang saya inginkan adalah... icon tersebut posisinya sejajar dengan baris pertama kata-kata di sampingnya.

Bagaimana caranya?

Mohon bantuannya ya teman-teman.

Terima kasih...

UPDATE:

Saya mencoba kode baru, yaitu:

HTML

 <div class="list-group">
  <p class="list-group-item"><i class="fa fa-map-marker fa fw" aria-hidden="true"></i>  Jalan Raya Peruri, Desa Pinayungan, Telukjambe Timur, Karawang 41361</p>
  <p class="list-group-item"><i class="fa fa-phone-square fa fw" aria-hidden="true"></i>  0267 863-0666</p>

 <div class="list-group">
  <p class="list-group-item"><i class="fa fa-building fa fw" aria-hidden="true"></i>  Komplek Radio Dalam Square Blok 1B
Jalan Radio Dalam Raya, Gandaria Utara, Kebayoran Baru, Jakarta Selatan 12140</p>
  <p class="list-group-item"><i class="fa fa-phone-square fa fw" aria-hidden="true"></i>  021 2905-4977</p>
  <p class="list-group-item"><i class="fa fa-whatsapp fa fw" aria-hidden="true"></i>  0811-170-0037</p>

Hasilnya:

Seperti yang tertera pada screenshot di atas, bahwa icon sudah sejajar dengan paragraf baris pertama, tapi mulai baris kedua dan seterusnya tidak indent.

Ada yang tahu bagaimana membuat paragraf baris kedua dan seterusnya indent sehingga sejajar dengan paragraf baris pertama?

Mohon bantuannya.

Terima kasih...