Font Awesome CSS bullet lists

Use CSS to show an icon from Font Awesome to replace the bullets within an HTML list

HTML

<script src="https://use.fontawesome.com/795511543c.js"></script>
<div class="checklist">
    <ul>
        <li>List item one</li>
        <li>List item secondary</li>
        <li>List item thirdly</li>
    </ul>
</div>
<hr>
<div class="checklist pluslist">
    <ul>
        <li>List item one</li>
        <li>List item secondary that has really long test for example of wrapping, and showing that the text still indents properly &mdash; so that it stays in line with the rest of the left edge of the text.</li>
        <li>List item thirdly</li>
        <li>List item 4</li>
    </ul>
</div>
<hr>
<div class="checklist eventlist">
    <ul>
        <li>List item one</li>
        <li>List item secondary</li>
        <li>List item thirdly</li>
        <li>List item 4</li>
    </ul>
</div>

CSS

.checklist ul {
    margin: 0;
    list-style: none;
}

.checklist ul li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 6px !important;
}

.checklist ul li::before {
    font-family: 'FontAwesome';
    content: '\f052';
    width: 20px;
    margin: 0;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #25B4D1;
    /* set font size helps make icon sharper */
    font-size: 17px;
}

.pluslist ul li::before {
    content: '\f056';
}

.eventlist ul li {
    margin-bottom: 15px !important;
}

.eventlist ul li::before {
    content: '\f274';
    color: red;
}