样式列表项目，用fontawesome替换子弹

Question

我必须创建一个像这样的列表

我试图用fontawesome图标取代子弹，但是我得到了类似的东西

请注意，两者之间存在间距差异。我的CSS是

.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

<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>

我做错了什么？

Answer 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;
}

您需要将列表格式更改为表格

Answer 2

当心字体5，您需要一个不同的字体名称

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

Answer 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
}