@font-face { font-family: 'simple-line-icons'; src: url('../fonts/simple-line-icons.eot?23594131'); src: url('../fonts/simple-line-icons.eot?23594131#iefix') format('embedded-opentype'), url('../fonts/simple-line-icons.woff2?23594131') format('woff2'), url('../fonts/simple-line-icons.woff?23594131') format('woff'), url('../fonts/simple-line-icons.ttf?23594131') format('truetype'), url('../fonts/simple-line-icons.svg?23594131#simple-line-icons') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'simple-line-icons'; src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg'); } } */ %icon, [class^='icon-']:before, [class*=' icon-']:before { font-family: 'simple-line-icons'; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: 0.2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: 0.2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); } $icons: ( user-female: '\e000', people: '\e001', user-follow: '\e002', user-following: '\e003', user-unfollow: '\e004', user: '\e005', trophy: '\e006', speedometer: '\e007', social-youtube: '\e008', social-twitter: '\e009', social-tumblr: '\e00a', social-facebook: '\e00b', social-dropbox: '\e00c', social-dribbble: '\e00d', shield: '\e00e', screen-tablet: '\e00f', screen-smartphone: '\e010', screen-desktop: '\e011', plane: '\e012', notebook: '\e013', mustache: '\e014', mouse: '\e015', magnet: '\e016', magic-wand: '\e017', hourglass: '\e018', graduation: '\e019', ghost: '\e01a', game-controller: '\e01b', fire: '\e01c', eyeglass: '\e01d', envelope-open: '\e01e', envolope-letter: '\e01f', energy: '\e020', emotsmile: '\e021', disc: '\e022', cursor-move: '\e023', crop: '\e024', credit-card: '\e025', chemistry: '\e026', bell: '\e027', badge: '\e028', anchor: '\e029', wallet: '\e02a', vector: '\e02b', speech: '\e02c', puzzle: '\e02d', printer: '\e02e', present: '\e02f', playlist: '\e030', pin: '\e031', picture: '\e032', map: '\e033', layers: '\e034', handbag: '\e035', globe-alt: '\e036', globe: '\e037', frame: '\e038', folder-alt: '\e039', film: '\e03a', feed: '\e03b', earphones-alt: '\e03c', earphones: '\e03d', drop: '\e03e', drawar: '\e03f', docs: '\e040', directions: '\e041', direction: '\e042', diamond: '\e043', cup: '\e044', compass: '\e045', call-out: '\e046', call-in: '\e047', call-end: '\e048', calculator: '\e049', bubbles: '\e04a', briefcase: '\e04b', book-open: '\e04c', basket-loaded: '\e04d', basket: '\e04e', bag: '\e04f', action-undo: '\e050', action-redo: '\e051', wrench: '\e052', umbrella: '\e053', trash: '\e054', tag: '\e055', support: '\e056', size-fullscreen: '\e057', size-actual: '\e058', shuffle: '\e059', share-alt: '\e05a', share: '\e05b', rocket: '\e05c', question: '\e05d', pie-chart: '\e05e', pencil: '\e05f', note: '\e060', music-tone-alt: '\e061', music-tone: '\e062', microphone: '\e063', loop: '\e064', logout: '\e065', login: '\e066', list: '\e067', like: '\e068', home: '\e069', grid: '\e06a', graph: '\e06b', equalizer: '\e06c', dislike: '\e06d', cursor: '\e06e', control-start: '\e06f', control-rewind: '\e070', control-play: '\e071', control-pause: '\e072', control-forward: '\e073', control-end: '\e074', calender: '\e075', bulb: '\e076', chart: '\e077', arrow-up-circle: '\e078', arrow-right-circle: '\e079', arrow-left-circle: '\e07a', arrow-down-circle: '\e07b', ban: '\e07c', bubble: '\e07d', camrecorder: '\e07e', camera: '\e07f', check: '\e080', clock: '\e081', close: '\e082', cloud-download: '\e083', cloud-upload: '\e084', doc: '\e085', envolope: '\e086', eye: '\e087', flag: '\e088', folder: '\e089', heart: '\e08a', info: '\e08b', key: '\e08c', link: '\e08d', lock: '\e08e', lock-open: '\e08f', magnifier: '\e090', magnifier-add: '\e091', magnifier-remove: '\e092', paper-clip: '\e093', paper-plane: '\e094', plus: '\e095', location-pin: '\e096', power: '\e097', refresh: '\e098', reload: '\e099', settings: '\e09a', star: '\e09b', symble-female: '\e09c', symbol-male: '\e09d', target: '\e09e', volume-1: '\e09f', volume-2: '\e0a0', volume-off: '\e0a1', phone: '\e600', menu: '\e601', options-vertical: '\e602', options: '\e603', arrow-down: '\e604', arrow-left: '\e605', arrow-right: '\e606', arrow-up: '\e607', paypal: '\e608', social-instagram: '\e609', social-linkedin: '\e60a', social-pintarest: '\e60b', social-github: '\e60c', social-google: '\e60d', social-reddit: '\e60e', social-skype: '\e60f', social-behance: '\e610', social-foursqare: '\e611', social-soundcloud: '\e612', social-spotify: '\e613', social-stumbleupon: '\e614', minus: '\e615', organization: '\e616', exclamation: '\e617', social-vkontakte: '\e618', event: '\e619', social-steam: '\e620', ); @each $name, $code in $icons { .icon-#{$name} { &:before { content: $code; } } } @mixin icon($code) { @extend %icon; @extend .icon-#{$code}; }