Css
                                    div.image {
                                    max-width:            16px;
                                    max-height:           16px;
                                    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABDUlEQVQ4T5WTy01CURCGPxoQO/DRAFqBliAVgHsXUAF2IOxcYgdYgVCBLNmBFQAJe8hnZhJeN3omOcm5N/d/zD9za5TXJfAGPAutleN5BXrAUJJSgmvgG9CFNSwlmAINYA10gFEJgZZbwCfQBlb/yUCrfphg7zcJ/otAixfAbSh3gUfgCrjP8KtaMOkN8BIAR6YLaxsE5nF2jIJnwDtQBybAPOZu7/29KZwlsO9FgH+ArxBK67bxq17lIAMTrJqqy+h/BDT3l+84gwQbmPdx2H8CPuI5szhxkGCXxBxUdxLu/SDa8t1BpQNXNIOyP5VdWcel+l0Qnvw6Esj6EClnOBJ6DNNTWRKYupa1W1w7r6I5wBkumqwAAAAASUVORK5CYII=');
 
@font-face {
    font-family: "Flaticon";
    src: url("/local--files/flaticon.eot");
    src: url("/local--files/flaticon.eot#iefix") format("embedded-opentype"),
    url("/local--files/flaticon.woff") format("woff"),
    url("/local--files/flaticon.ttf") format("truetype"),
    url("/local--files/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
    font-family: Flaticon;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}
 
.flaticon-trumpet9:before {
    content: "\e0d8";
}
 
                                    }
Site Design, Syntax and Examples by Rob Elliott 2008-2016