Custom list style with Font Awesome

I frequently use Font Awesome when making website to easily add icons to buttons or within the pages. You can also use Font awesome to make a custom list style. This is a useful website to search for Font awesome icons -> http://faicons.com/ and get the unicode to change the icon. You can change the type of icon in the li:before selector. Just change the value of the content to the unicode number of the icon.

li {
        list-style: none;
        padding-left: 1.2em;
        margin-left: -53px;

        a{
            color: #fff;
        }
}

li:before{
        content: "f105";
        font-family: 'FontAwesome';
        display: inline-block;
        width: 1.2em;
}

 

• HTML & CSS