2 @simple-line-font-path : "../fonts/";
3 @simple-line-font-family : "simple-line-icons";
4 @simple-line-icon-prefix : icon-;
8 font-family: '@{simple-line-font-family}';
9 src: url('@{simple-line-font-path}Simple-Line-Icons.eot?v=2.2.2');
10 src: url('@{simple-line-font-path}Simple-Line-Icons.eot?#iefix&v=2.2.2') format('embedded-opentype'),
11 url('@{simple-line-font-path}Simple-Line-Icons.ttf?v=2.2.2') format('truetype'),
12 url('@{simple-line-font-path}Simple-Line-Icons.woff2?v=2.2.2') format('woff2'),
13 url('@{simple-line-font-path}Simple-Line-Icons.woff?v=2.2.2') format('woff'),
14 url('@{simple-line-font-path}Simple-Line-Icons.svg?v=2.2.2#simple-line-icons') format('svg');
20 Use the following CSS code if you want to have a class per icon.
21 Instead of a list of all class selectors, you can use the generic [class*="icon-"] selector, but it's slower:
24 .@{simple-line-icon-prefix} {
208 font-family: '@{simple-line-font-family}';
212 font-variant: normal;
213 text-transform: none;
216 /* Better Font Rendering =========== */
217 -webkit-font-smoothing: antialiased;
218 -moz-osx-font-smoothing: grayscale;
222 .@{simple-line-icon-prefix}user:before {
226 .@{simple-line-icon-prefix}people:before {
230 .@{simple-line-icon-prefix}user-female:before {
234 .@{simple-line-icon-prefix}user-follow:before {
238 .@{simple-line-icon-prefix}user-following:before {
242 .@{simple-line-icon-prefix}user-unfollow:before {
246 .@{simple-line-icon-prefix}login:before {
250 .@{simple-line-icon-prefix}logout:before {
254 .@{simple-line-icon-prefix}emotsmile:before {
258 .@{simple-line-icon-prefix}phone:before {
262 .@{simple-line-icon-prefix}call-end:before {
266 .@{simple-line-icon-prefix}call-in:before {
270 .@{simple-line-icon-prefix}call-out:before {
274 .@{simple-line-icon-prefix}map:before {
278 .@{simple-line-icon-prefix}location-pin:before {
282 .@{simple-line-icon-prefix}direction:before {
286 .@{simple-line-icon-prefix}directions:before {
290 .@{simple-line-icon-prefix}compass:before {
294 .@{simple-line-icon-prefix}layers:before {
298 .@{simple-line-icon-prefix}menu:before {
302 .@{simple-line-icon-prefix}list:before {
306 .@{simple-line-icon-prefix}options-vertical:before {
310 .@{simple-line-icon-prefix}options:before {
314 .@{simple-line-icon-prefix}arrow-down:before {
318 .@{simple-line-icon-prefix}arrow-left:before {
322 .@{simple-line-icon-prefix}arrow-right:before {
326 .@{simple-line-icon-prefix}arrow-up:before {
330 .@{simple-line-icon-prefix}arrow-up-circle:before {
334 .@{simple-line-icon-prefix}arrow-left-circle:before {
338 .@{simple-line-icon-prefix}arrow-right-circle:before {
342 .@{simple-line-icon-prefix}arrow-down-circle:before {
346 .@{simple-line-icon-prefix}check:before {
350 .@{simple-line-icon-prefix}clock:before {
354 .@{simple-line-icon-prefix}plus:before {
358 .@{simple-line-icon-prefix}close:before {
362 .@{simple-line-icon-prefix}trophy:before {
366 .@{simple-line-icon-prefix}screen-smartphone:before {
370 .@{simple-line-icon-prefix}screen-desktop:before {
374 .@{simple-line-icon-prefix}plane:before {
378 .@{simple-line-icon-prefix}notebook:before {
382 .@{simple-line-icon-prefix}mustache:before {
386 .@{simple-line-icon-prefix}mouse:before {
390 .@{simple-line-icon-prefix}magnet:before {
394 .@{simple-line-icon-prefix}energy:before {
398 .@{simple-line-icon-prefix}disc:before {
402 .@{simple-line-icon-prefix}cursor:before {
406 .@{simple-line-icon-prefix}cursor-move:before {
410 .@{simple-line-icon-prefix}crop:before {
414 .@{simple-line-icon-prefix}chemistry:before {
418 .@{simple-line-icon-prefix}speedometer:before {
422 .@{simple-line-icon-prefix}shield:before {
426 .@{simple-line-icon-prefix}screen-tablet:before {
430 .@{simple-line-icon-prefix}magic-wand:before {
434 .@{simple-line-icon-prefix}hourglass:before {
438 .@{simple-line-icon-prefix}graduation:before {
442 .@{simple-line-icon-prefix}ghost:before {
446 .@{simple-line-icon-prefix}game-controller:before {
450 .@{simple-line-icon-prefix}fire:before {
454 .@{simple-line-icon-prefix}eyeglass:before {
458 .@{simple-line-icon-prefix}envelope-open:before {
462 .@{simple-line-icon-prefix}envelope-letter:before {
466 .@{simple-line-icon-prefix}bell:before {
470 .@{simple-line-icon-prefix}badge:before {
474 .@{simple-line-icon-prefix}anchor:before {
478 .@{simple-line-icon-prefix}wallet:before {
482 .@{simple-line-icon-prefix}vector:before {
486 .@{simple-line-icon-prefix}speech:before {
490 .@{simple-line-icon-prefix}puzzle:before {
494 .@{simple-line-icon-prefix}printer:before {
498 .@{simple-line-icon-prefix}present:before {
502 .@{simple-line-icon-prefix}playlist:before {
506 .@{simple-line-icon-prefix}pin:before {
510 .@{simple-line-icon-prefix}picture:before {
514 .@{simple-line-icon-prefix}handbag:before {
518 .@{simple-line-icon-prefix}globe-alt:before {
522 .@{simple-line-icon-prefix}globe:before {
526 .@{simple-line-icon-prefix}folder-alt:before {
530 .@{simple-line-icon-prefix}folder:before {
534 .@{simple-line-icon-prefix}film:before {
538 .@{simple-line-icon-prefix}feed:before {
542 .@{simple-line-icon-prefix}drop:before {
546 .@{simple-line-icon-prefix}drawar:before {
550 .@{simple-line-icon-prefix}docs:before {
554 .@{simple-line-icon-prefix}doc:before {
558 .@{simple-line-icon-prefix}diamond:before {
562 .@{simple-line-icon-prefix}cup:before {
566 .@{simple-line-icon-prefix}calculator:before {
570 .@{simple-line-icon-prefix}bubbles:before {
574 .@{simple-line-icon-prefix}briefcase:before {
578 .@{simple-line-icon-prefix}book-open:before {
582 .@{simple-line-icon-prefix}basket-loaded:before {
586 .@{simple-line-icon-prefix}basket:before {
590 .@{simple-line-icon-prefix}bag:before {
594 .@{simple-line-icon-prefix}action-undo:before {
598 .@{simple-line-icon-prefix}action-redo:before {
602 .@{simple-line-icon-prefix}wrench:before {
606 .@{simple-line-icon-prefix}umbrella:before {
610 .@{simple-line-icon-prefix}trash:before {
614 .@{simple-line-icon-prefix}tag:before {
618 .@{simple-line-icon-prefix}support:before {
622 .@{simple-line-icon-prefix}frame:before {
626 .@{simple-line-icon-prefix}size-fullscreen:before {
630 .@{simple-line-icon-prefix}size-actual:before {
634 .@{simple-line-icon-prefix}shuffle:before {
638 .@{simple-line-icon-prefix}share-alt:before {
642 .@{simple-line-icon-prefix}share:before {
646 .@{simple-line-icon-prefix}rocket:before {
650 .@{simple-line-icon-prefix}question:before {
654 .@{simple-line-icon-prefix}pie-chart:before {
658 .@{simple-line-icon-prefix}pencil:before {
662 .@{simple-line-icon-prefix}note:before {
666 .@{simple-line-icon-prefix}loop:before {
670 .@{simple-line-icon-prefix}home:before {
674 .@{simple-line-icon-prefix}grid:before {
678 .@{simple-line-icon-prefix}graph:before {
682 .@{simple-line-icon-prefix}microphone:before {
686 .@{simple-line-icon-prefix}music-tone-alt:before {
690 .@{simple-line-icon-prefix}music-tone:before {
694 .@{simple-line-icon-prefix}earphones-alt:before {
698 .@{simple-line-icon-prefix}earphones:before {
702 .@{simple-line-icon-prefix}equalizer:before {
706 .@{simple-line-icon-prefix}like:before {
710 .@{simple-line-icon-prefix}dislike:before {
714 .@{simple-line-icon-prefix}control-start:before {
718 .@{simple-line-icon-prefix}control-rewind:before {
722 .@{simple-line-icon-prefix}control-play:before {
726 .@{simple-line-icon-prefix}control-pause:before {
730 .@{simple-line-icon-prefix}control-forward:before {
734 .@{simple-line-icon-prefix}control-end:before {
738 .@{simple-line-icon-prefix}volume-1:before {
742 .@{simple-line-icon-prefix}volume-2:before {
746 .@{simple-line-icon-prefix}volume-off:before {
750 .@{simple-line-icon-prefix}calendar:before {
754 .@{simple-line-icon-prefix}bulb:before {
758 .@{simple-line-icon-prefix}chart:before {
762 .@{simple-line-icon-prefix}ban:before {
766 .@{simple-line-icon-prefix}bubble:before {
770 .@{simple-line-icon-prefix}camrecorder:before {
774 .@{simple-line-icon-prefix}camera:before {
778 .@{simple-line-icon-prefix}cloud-download:before {
782 .@{simple-line-icon-prefix}cloud-upload:before {
786 .@{simple-line-icon-prefix}envelope:before {
790 .@{simple-line-icon-prefix}eye:before {
794 .@{simple-line-icon-prefix}flag:before {
798 .@{simple-line-icon-prefix}heart:before {
802 .@{simple-line-icon-prefix}info:before {
806 .@{simple-line-icon-prefix}key:before {
810 .@{simple-line-icon-prefix}link:before {
814 .@{simple-line-icon-prefix}lock:before {
818 .@{simple-line-icon-prefix}lock-open:before {
822 .@{simple-line-icon-prefix}magnifier:before {
826 .@{simple-line-icon-prefix}magnifier-add:before {
830 .@{simple-line-icon-prefix}magnifier-remove:before {
834 .@{simple-line-icon-prefix}paper-clip:before {
838 .@{simple-line-icon-prefix}paper-plane:before {
842 .@{simple-line-icon-prefix}power:before {
846 .@{simple-line-icon-prefix}refresh:before {
850 .@{simple-line-icon-prefix}reload:before {
854 .@{simple-line-icon-prefix}settings:before {
858 .@{simple-line-icon-prefix}star:before {
862 .@{simple-line-icon-prefix}symble-female:before {
866 .@{simple-line-icon-prefix}symbol-male:before {
870 .@{simple-line-icon-prefix}target:before {
874 .@{simple-line-icon-prefix}credit-card:before {
878 .@{simple-line-icon-prefix}paypal:before {
882 .@{simple-line-icon-prefix}social-tumblr:before {
886 .@{simple-line-icon-prefix}social-twitter:before {
890 .@{simple-line-icon-prefix}social-facebook:before {
894 .@{simple-line-icon-prefix}social-instagram:before {
898 .@{simple-line-icon-prefix}social-linkedin:before {
902 .@{simple-line-icon-prefix}social-pinterest:before {
906 .@{simple-line-icon-prefix}social-github:before {
910 .@{simple-line-icon-prefix}social-gplus:before {
914 .@{simple-line-icon-prefix}social-reddit:before {
918 .@{simple-line-icon-prefix}social-skype:before {
922 .@{simple-line-icon-prefix}social-dribbble:before {
926 .@{simple-line-icon-prefix}social-behance:before {
930 .@{simple-line-icon-prefix}social-foursqare:before {
934 .@{simple-line-icon-prefix}social-soundcloud:before {
938 .@{simple-line-icon-prefix}social-spotify:before {
942 .@{simple-line-icon-prefix}social-stumbleupon:before {
946 .@{simple-line-icon-prefix}social-youtube:before {
950 .@{simple-line-icon-prefix}social-dropbox:before {