Webfonts als Symbol neben Plugin

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.
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete 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>