@font-face { font-family: "raty"; font-style: normal; font-weight: normal; src: url("../font/raty.eot"); src: url("../font/raty.eot?#iefix") format("embedded-opentype"); src: url("../font/raty.svg#raty") format("svg"); src: url("../font/raty.ttf") format("truetype"); src: url("../font/raty.woff") format("woff"); font-display: swap; } .cancel-on-png, .cancel-off-png, .star-on-png, .star-off-png, .star-half-png { font-family: "raty"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-right: 0.2em; color: #ccc; } .star-on-png, .star-half-png {color: #ffbe32} /* Icons */ .cancel-on-png:before {content: "\e600";} .cancel-off-png:before {content: "\e601";} .star-on-png:before {content: "\f005";} .star-off-png:before {content: "\f006";} .star-half-png:before {content: "\f123";}