@font-face { font-family: 'ionicon-test'; src:url('fonts/ionicon-test.eot'); src:url('fonts/ionicon-test.eot?#iefix') format('embedded-opentype'), url('fonts/ionicon-test.woff') format('woff'), url('fonts/ionicon-test.ttf') format('truetype'), url('fonts/ionicon-test.svg#ionicon-test') format('svg'); 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: 'ionicon-test'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ .icon-voicemail, .icon-star, .icon-star-filled, .icon-voicemail-filled, .icon-keypad, .icon-keypad-filled, .icon-contact, .icon-clock, .icon-clock-filled, .icon-contact-filled { font-family: 'ionicon-test'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .icon-voicemail:before { content: "\e000"; } .icon-star:before { content: "\e001"; } .icon-star-filled:before { content: "\e002"; } .icon-voicemail-filled:before { content: "\e003"; } .icon-keypad:before { content: "\e004"; } .icon-keypad-filled:before { content: "\e005"; } .icon-contact:before { content: "\e006"; } .icon-clock:before { content: "\e007"; } .icon-clock-filled:before { content: "\e008"; } .icon-contact-filled:before { content: "\e009"; }