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.
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>