List Bullets - Icon Font

by Annett

HTML

<ul class="dots-three">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

<ul class="checkmark">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>  

<ul class="plus">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>  

<ul class="play">
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

CSS

/* this is the font style sheet you create on http://icomoon.io Start*/
@font-face {
    font-family: 'icomoon';
    src:url('http://www.the-annett.com/jsfiddle/fonts/icomoon.eot'); /*change to your own font location*/
    src:url('http://www.the-annett.com/jsfiddle/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('http://www.the-annett.com/jsfiddle/fonts/icomoon.svg#icomoon') format('svg'),
        url('http://www.the-annett.com/jsfiddle/fonts/icomoon.woff') format('woff'),
        url('http://www.the-annett.com/jsfiddle/fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}
.icon-dots-three:before {
    content: "\21";
}
.icon-checkmark:before {
    content: "\22";
}
.icon-plus:before {
    content: "\23";
}
.icon-play:before {
    content: "\24";
}
/* this is the font style sheet you create on http://icomoon.io End*/

/* add this to your global style sheet*/
ul {
    list-style:none;
    padding-bottom:20px;
}
        
.dots-three li:before {
        content: '"'; /*this is the character I have attached to the dots icon*/
        font-size: 16px; /*only applies to the icon add some line-height if you want them bigger*/
        padding-right: 10px;
        font-family: "icomoon";
        color:deeppink;
        padding: 5px;
        margin: 5px;
    }

.checkmark li:before {
        content: "!"; /*this is the character I have attached to the dots icon*/
        font-size: 16px; /*only applies to...