src/wolnelektury/static/2022/styles/base/_icons.scss

   1 /* ------------------------------
   2     Base: Icons
   3 ------------------------------ */
   4
   5 $icomoon-font-family: "wl" !default;
   6 $icomoon-font-path:   "../fonts" !default;
   7
   8 $icon-liked: "\e900";
   9 $icon-arrow-right: "\e901";
  10 $icon-arrow-up: "\e902";
  11 $icon-audio: "\e903";
  12 $icon-book: "\e904";
  13 $icon-eye: "\e905";
  14 $icon-play: "\e906";
  15 $icon-pause: "\e907";
  16 $icon-quote: "\e908";
  17 $icon-search: "\e909";
  18 $icon-acc-1: "\e90a";
  19 $icon-acc-2: "\e90b";
  20 $icon-acc-3: "\e90c";
  21 $icon-all: "\e90d";
  22 $icon-arrow-down: "\e90e";
  23 $icon-close: "\e90f";
  24
  25 @font-face {
  26   font-family: '#{$icomoon-font-family}';
  27   src:
  28           url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'),
  29           url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'),
  30           url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg');
  31   font-weight: normal;
  32   font-style: normal;
  33   font-display: block;
  34 }
  35
  36 [class^="icon-"], [class*=" icon-"] {
  37   /* use !important to prevent issues with browser extensions that change fonts */
  38   font-family: '#{$icomoon-font-family}' !important;
  39   speak: never;
  40   font-style: normal;
  41   font-weight: normal;
  42   font-variant: normal;
  43   text-transform: none;
  44   line-height: 1;
  45
  46   /* Better Font Rendering =========== */
  47   -webkit-font-smoothing: antialiased;
  48   -moz-osx-font-smoothing: grayscale;
  49 }
  50
  51 .icon-liked {
  52   &:before {
  53     content: $icon-liked;
  54   }
  55 }
  56 .icon-arrow-right {
  57   &:before {
  58     content: $icon-arrow-right;
  59   }
  60 }
  61 .icon-arrow-up {
  62   &:before {
  63     content: $icon-arrow-up;
  64   }
  65 }
  66 .icon-audio {
  67   &:before {
  68     content: $icon-audio;
  69   }
  70 }
  71 .icon-book {
  72   &:before {
  73     content: $icon-book;
  74   }
  75 }
  76 .icon-eye {
  77   &:before {
  78     content: $icon-eye;
  79   }
  80 }
  81 .icon-play {
  82   &:before {
  83     content: $icon-play;
  84   }
  85 }
  86 .icon-pause {
  87   &:before {
  88     content: $icon-pause;
  89   }
  90 }
  91 .icon-quote {
  92   &:before {
  93     content: $icon-quote;
  94   }
  95 }
  96 .icon-search {
  97   &:before {
  98     content: $icon-search;
  99   }
 100 }
 101 .icon-acc-1 {
 102   &:before {
 103     content: $icon-acc-1;
 104   }
 105 }
 106 .icon-acc-2 {
 107   &:before {
 108     content: $icon-acc-2;
 109   }
 110 }
 111 .icon-acc-3 {
 112   &:before {
 113     content: $icon-acc-3;
 114   }
 115 }
 116 .icon-all {
 117   &:before {
 118     content: $icon-all;
 119   }
 120 }
 121 .icon-arrow-down {
 122   &:before {
 123     content: $icon-arrow-down;
 124   }
 125 }
 126 .icon-close {
 127   &:before {
 128     content: $icon-close;
 129   }
 130 }