Styling list items, replacing bullet with fontawesome

问题

I have to create a list like this

I have tried to replace bullet with fontawesome icon which worked but I am getting something like this

Notice, there is a spacing difference between both of them. My CSS is

.custom_list li {
 line-height:2em;
 padding-left:0px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
}
.custom_list li:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
}

HTML is

<ul class="custom_list" >
  <li>Medical Student Education</li>
  <li>Resident Training Education (Medicine, Osteopathic, Pharmacy)</li>
  <li>Fellowship Training Education (all medical subspecialties)</li>
  <li>Nursing Student Training Education</li>
  <li>Nurse Practitioner Education</li>
  <li>Nurse Continuing Education</li>
  <li>Physician Continuing Medical Education</li>
</ul>

What am i doing wrong?

回答1:

.custom_list li {
 line-height:2em;
 padding-left:0px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
 display: table-row;
}
.custom_list li:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
 display: table-cell;
}

You need to change your list format to table

回答2:

Beware in font awesome 5, you will need a different font name,

.custom_list li:before {
 font-family: 'Font Awesome 5 Free'
}

回答3:

.custom_list li {
 line-height:2em;
 padding-left:20px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
}
.custom_list li:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
 position:absolute;
  left:40px
}

来源：https://stackoverflow.com/questions/47440865/styling-list-items-replacing-bullet-with-fontawesome