replace unicode play icon with font face icon

app/static/css/partials/_film.scss

@@ -152,7 +152,6 @@ main > .film {
   border: 4px solid rgba(#fff, 0.3);
   border-radius: 50%;
   box-sizing: border-box;
-  font-size: 36px;
   text-decoration: none;
   width: 54px;
   height: 54px;
@@ -160,6 +159,12 @@ main > .film {
   align-items: center;
   justify-content: center;
   margin: auto;
+
+  .text {
+    font-family: "icomoon";
+    font-size: 42px;
+    display: block;
+  }
 }
 
 .film-play-block {

app/static/css/partials/_icomoon.scss

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'icomoon';
+  src:
+    url('/static/fonts/icomoon/icomoon.ttf?ru5m2') format('truetype'),
+    url('/static/fonts/icomoon/fonts/icomoon.woff?ru5m2') format('woff'),
+    url('/static/fonts/icomoon/icomoon.svg?ru5m2#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="f-icon-"], [class*=" f-icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.f-icon-triangle-up:before {
+  content: "\e900";
+}
+.f-icon-triangle-right:before {
+  content: "\e901";
+}
+.f-icon-triangle-left:before {
+  content: "\e902";
+}
+.f-icon-triangle-down:before {
+  content: "\e903";
+}

app/static/css/style.scss

@@ -1,4 +1,5 @@
 @import "partials/reset";
+@import "partials/icomoon";
 @import "partials/layout";
 @import "partials/titleanimation";
 @import "partials/menu";