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

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s