Hi zusammen,
ich habe auf einer GitHub-Seite dieses CSS gefunden, mit dem ein WiFi-Icon dargestellt wird.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.wifi {
padding: 20px;
}
.wifi, .wifi:before {
display: inline-block;
border: 60px double transparent;
border-top-color: currentColor;
border-radius: 50%;
}
.wifi:before {
content: '';
width: 0; height: 0;
}
</style>
<body>
<div class="wifi"></div>
</body>
</html>Mein CSS-Grips reicht leider noch nicht aus, um es hinzubekommen, dass ich dieses Icon in der Größe verändern kann.
Ein einfaches "width:20px; height:20px" im .wifi{} ist jedenfalls nicht die Lösund 
Kann mir hier jemand einen Tipp geben?
LG Daniel
Edit:
Hab jetzt noch ein anderes gefunden:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.gg-cast {
box-sizing: border-box;
position: relative;
display: block;
transform: scale(var(--ggs,1));
border-radius: 2px;
border-left: 0
}
.gg-cast::after,
.gg-cast::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 20px;
height: 20px;
border: 6px double;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
border-radius: 50%;
transform: rotate(270deg);
bottom: -10px;
left: -10px
}
.gg-cast::after {
width: 4px;
height: 4px;
border: 2px solid;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
bottom: -2px;
left: -2px
}
</style>
<body>
<i class="gg-cast"></i>
</body>
</html>Aber auch hier das gleiche Problem: Ich bin nicht fähig, das Icon z.B. auf die Größe von 40px mal 40px zu bekommen (nur als Beispiel).
Wie geht man da vor? Kann man nicht einfach einen Wrapper drumherum packen und das Icon auf 100% skalieren?
