changed fontawesome link

index.html

@@ -7,7 +7,9 @@
 <link rel="stylesheet" href="static/css/jquery-ui.min.css">
 <link rel="stylesheet" href="static/css/bootstrap.min.css">
 <link rel="stylesheet" href="static/css/style.css">
-<link rel="stylesheet" href="static/css/fontawesome.css" crossorigin="anonymous">
+<link
+  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
+  rel="stylesheet"  type='text/css'>
 <script src="static/js/jquery-3.5.1.min.js"></script>
 <script src="static/js/jquery-ui.min.js"></script>
 <script src="static/js/bootstrap.min.js"></script>
@@ -31,10 +33,10 @@
          </audio>
     </div>
     <div class="map_legend">
-    <div id="box1" onclick="popup_bg(10)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
-    <div id="box2" onclick="popup_bg(300)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
-    <div id="box3" onclick="popup_bg(500)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
-    <div id="box4" onclick="popup_bg(700)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
+    <div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
+    <div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
+    <div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
+    <div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
   </div>
      </div>
   </div>

static/css/style.css

@@ -70,6 +70,11 @@ body {
   background: transparent;
   color:inherit;
 }
+audio {
+    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
+    width: 200px;
+    height: 25px;
+}
 
 .audio-button:hover {
 background: grey;