Update fontawesome+more icons, fonts and css

public/centropais/index.html

@@ -10,11 +10,11 @@
     <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
     <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css" />
     <link rel="stylesheet" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css" />
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
     <link rel="stylesheet" href="../js/L.VisualClick/L.VisualClick.css" />
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
     <link rel="stylesheet" href="../css/style.css" />
+    <link rel="stylesheet" href="../css/fontawesome.css" />
     <link rel="icon" href="../img/urban.jpeg" sizes="16x16" />
 </head>
 
@@ -52,7 +52,7 @@
     <div class="d-flex flex-column" id="mainContainer">
         <!--<header class="page-header py-2">-->
             <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
-            <a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-undo"></i></a>
+            <a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-arrow-left"></i></a>
             <!--<div class="container text-center">-->
             <div class="navbar-nav mx-auto">
                 <div class="row align-items-center text-center" id="title">

public/css/style.css

@@ -266,196 +266,6 @@ span.frac > span {
 /* FIX: if scrollbar is hidden, tr goes beyond padding...
 /*.table-fixed tr:has([overflow-y]) + .table-fixed tr {width:calc(100% - 15px);}
 
-/******
-Icons
-******/
-
-.fa {
-    display:inline-block;
-    font:normal normal normal 14px/1 icomoon;
-    font-size:inherit;
-    text-rendering:auto;
-    -webkit-font-smoothing:antialiased;
-    -moz-osx-font-smoothing:grayscale;
-}
-.fa-lg {
-    font-size: 1.33333333em;
-    line-height: .75em;
-    vertical-align: -15%;
-}
-.fa-2x {
-    font-size: 2em;
-}
-.fa-3x {
-    font-size:3em;
-}
-.fa-4x {
-    font-size:4em;
-}
-.fa-5x {
-    font-size: 5em;
-}
-.fa-stack {
-    position: relative;
-    display: inline-block;
-    width: 2em;
-    height: 2em;
-    line-height: 2em;
-    vertical-align: middle;
-}
-.fa-stack-1x, .fa-stack-2x {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    text-align: center;
-}
-.fa-stack-1x {
-    line-height: inherit;
-}
-.fa-stack-2x {
-    font-size: 2em;
-}
-.fa-inverse {
-    color: #fff;
-}
-.fa-spin {
-    -webkit-animation:fa-spin 2s infinite linear;
-    animation:fa-spin 2s infinite linear;
-}
-@-webkit-keyframes fa-spin {
-    0% {
-        -webkit-transform:rotate(0deg);
-        transform:rotate(0deg);
-    }
-    100% {
-    -webkit-transform:rotate(359deg);
-    transform:rotate(359deg);
-    }
-}
-@keyframes fa-spin {
-    0% {
-        -webkit-transform:rotate(0deg);
-        transform:rotate(0deg);
-    }
-    100% {
-        -webkit-transform:rotate(359deg);
-        transform:rotate(359deg);
-    }
-}
-
-@font-face {
-    font-family: 'icomoon';
-    src:  url('fonts/icomoon.eot?arfpvn');
-    src:  url('fonts/icomoon.eot?arfpvn#iefix') format('embedded-opentype'),
-      url('fonts/icomoon.ttf?arfpvn') format('truetype'),
-      url('fonts/icomoon.woff?arfpvn') format('woff'),
-      url('fonts/icomoon.svg?arfpvn#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
-}
-
-[class^="fa-"], [class*=" fa-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'icomoon' /*!important*/;
-    speak: none;
-    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;
-}
-
-  .fa-puertoindustrial:before {
-    content: "\e90c";
-    /* color: #fff; */
-    color: #000; 
-    background-color: #F5F5F3;
-}
-
-.fa-plane:before {
-    content: "\e903";
-}
-.fa-shopping-cart:before {
-    content: "\f07a";
-}
-.fa-dollar:before {
-    content: "\f155";
-}
-.fa-bus1:before {
-    content: "\f207";
-}
-.fa-casetapeaje:before {
-    content: "\e904";
-}
-.fa-desechos:before {
-    content: "\e908";
-}
-.fa-escuela:before {
-    content: "\e909";
-}
-.fa-presa:before {
-    content: "\e90a";
-}
-.fa-puente:before {
-    content: "\e90b";
-}
-.fa-puertoindustrial:before {
-    content: "\e90c";
-    /* color: #fff; */
-    color: #000; 
-    background-color: #F5F5F3;
-}
-.fa-puntofronterizo:before {
-    content: "\e90d";
-} 
-.fa-spinner:before {
-    content: "\e97a";
-}
-.fa-spinner2:before {
-    content: "\e97b";
-}
-.fa-spinner3:before {
-    content: "\e97c";
-}
-.fa-spinner4:before {
-    content: "\e97d";
-}
-.fa-spinner5:before {
-    content: "\e97e";
-}
-.fa-spinner6:before {
-    content: "\e97f";
-}
-.fa-spinner7:before {
-    content: "\e980";
-}
-.fa-spinner8:before {
-    content: "\e981";
-}
-.fa-spinner9:before {
-    content: "\e982";
-}
-.fa-spinner10:before {
-    content: "\e983";
-}
-.fa-plus-circle:before {
-    content: "\f055";
-}
-.fa-bed:before {
-    content: "\f236";
-}
-.fa-refresh:before {
-    content: "\f021";
-}
-.fa-undo:before {
-    content: "\f0e2";
-}
-
 /* Graphs */
 
 #amchartdiv {

public/grijalva/index.html

@@ -10,11 +10,11 @@
     <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
     <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css" />
     <link rel="stylesheet" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <link rel="stylesheet" href="../js/L.VisualClick/L.VisualClick.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
     <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/fontawesome.css" />
     <link rel="icon" href="../img/grijalva.png" sizes="16x16">
 </head>
 

public/index.html

@@ -6,7 +6,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Proyecto FORDECyT 2018 - 10</title>
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="css/cover_style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />

public/js/centropais_basemap.js

@@ -1121,8 +1121,8 @@ const makeBaseMap = () => {
 
     resetControl.onAdd = () => {
         let div = L.DomUtil.create("div", "leaflet-bar leaflet-control");
-        div.innerHTML = "<button type=\"button\" class=\"btn btn-sm btn-light\" id=\"resetFlows\" title=\"Reiniciar fujos\"><i class=\"fa fa-refresh\"></i></button>";
-        //div.innerHTML = "<a class=\"btn btn-sm btn-light\" href=\"#\" role=\"button\" id=\"resetFlows\" title=\"Reiniciar fujos\" aria-label=\"aaa\"><i class=\"fa fa-refresh\"></i></a>";
+        div.innerHTML = "<button type=\"button\" class=\"btn btn-sm btn-light\" id=\"resetFlows\" title=\"Reiniciar fujos\"><i class=\"fa fa-sync-alt\"></i></button>";
+        //div.innerHTML = "<a class=\"btn btn-sm btn-light\" href=\"#\" role=\"button\" id=\"resetFlows\" title=\"Reiniciar fujos\" aria-label=\"aaa\"><i class=\"fa fa-sync-alt\"></i></a>";
         return div;
     };
 

public/js/centropais_charts.js

@@ -175,9 +175,7 @@ am4core.ready(function() {
     columnTemplate.strokeOpacity = 0;
     columnTemplate.stroke = bgColor;
     //columnTemplate.tooltipText = "{xVar} -> {yVar}: {value.workingValue.formatNumber('#.')}";
-    // TODO: FIX long-arrow not present in fa icons - conflict with
-    //  <i class="fas fa-long-arrow-alt-right"> does not work
-    columnTemplate.tooltipHTML = `<div class="amcharttooltip">{xVar} <i class="fas">&#xf30b;</i> {yVar}: {value.workingValue.formatNumber('#,###')}</div>`;
+    columnTemplate.tooltipHTML = `<div class="amcharttooltip">{xVar} <i class="fas fa-long-arrow-alt-right"></i> {yVar}: {value.workingValue.formatNumber('#,###')}</div>`;
     columnTemplate.width = am4core.percent(100);
     columnTemplate.height = am4core.percent(100);
     columnTemplate.column.cornerRadius(4, 4, 4, 4);

public/riesgos/index.html

@@ -10,11 +10,11 @@
     <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
     <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css" />
     <link rel="stylesheet" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
     <link rel="stylesheet" href="../js/L.VisualClick/L.VisualClick.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
     <link rel="stylesheet" href="../css/style.css">
+    <link rel="stylesheet" href="../css/fontawesome.css" />
     <link rel="icon" href="../img/risk.png" sizes="16x16">
 </head>