Archiv-Modus von Basti1012 Lösungspage

Hallo zusammen, könntet Ihr mir bitte nochmals bei der Einbindung eines Webfonts helfen? Dieses Mal soll das Webfonts-Symbol links neben einem Plugin erscheinen, welches automatisch ein Inhaltsverzeichnis erstellt.

Code

                                    
                                <html>
  <head>
    <link rel="stylesheet" href="/css_webseite/all.min.css">
    <style>
      body{
  height:100vh;
  width:100%;
  justify-content:center;
  display:flex;
}


nav{
  position:fixed;
  width:100%;
  height:50px;
  font-size:30px;
}

li{
  list-style-type:gurmukhi;
  font-size:20px;
}
#conti{
  display:flex;
  border:1px solid black;
  border-radius:5px;
  width:50vw;

  align-self:center;
}


#icon_conti{
  justify-content:center;
    align-self:center;
}
#list_conti{
  border-left:1px solid black;
}

i{
  font-size:30px;
  padding:10px; 
}
      </style>
<!--
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet">
-->  
</head>
   
<body>
  <nav id="info"></nav>
  <div id="conti">
    <div id="icon_conti">
      <i id="icon" class="fa fa-file"></i>
    </div>
    <div id="list_conti">
      <ul>
        <li>Line 1  mit viel text den man nicht sehen kann wenn man display none benutzt</line>
      <li>Line 2 </line>
    <li>Line 3 </line>
  <li>Line 4 </line>
      </ul>
    </div>
  </div>
<script>
      var inf = document.getElementById('info');
    var element = document.getElementById('conti');
    var con = element.getBoundingClientRect();
    var conheight = con.height-20;    
    var icon_i = document.getElementById('icon');
    var icon_conti = document.getElementById('icon_conti');
    icon_conti.style.width=conheight/100*75;
    icon_i.style.fontSize=(conheight)+'px';
    icow=conheight/100*75;
    info.innerHTML='font-size '+conheight.toFixed(2)+'  <br>Breite '+icow.toFixed(2);


</script>
  </body>
</html>

basti1012.bplaced.net

Webfonts als Symbol neben Plugin

Code