icon.gl
Version:
icon.gl is a icon library and framework developed by Scape Agency.
121 lines (96 loc) • 2.95 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Icon Scaling Test</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.p_16 {
font-size: 16px;
line-height: 20px;
}
.p_20 {
font-size: 20px;
line-height: 25px;
}
.grid {
padding: 2rem;
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.box {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
background: #f9f9f9;
}
.size_32 {
width: 32px;
height: 32px;
font-size: 32px;
}
.size_64 {
width: 64px;
height: 64px;
font-size: 64px;
}
.size_96 {
width: 96px;
height: 96px;
font-size: 96px;
}
.size_128 {
width: 128px;
height: 128px;
font-size: 128px;
}
.size_160 {
width: 160px;
height: 160px;
font-size: 160px;
}
</style>
<link rel="stylesheet" type="text/css" href="../../dist/css/icon.css" />
</head>
<body>
<section>
<h3>Inline Scale Test</h3>
<p class="text p_16">
Save your work <i class="i i_ui_update_sm"></i> regularly to avoid data loss.
</p>
<p class="text p_16">
Save your work <span class="i i_ui_update_sm"></span> regularly to avoid data loss.
</p>
<p class="text p_20">
Save your work <span class="i i_ui_update_sm"></span> regularly to avoid data loss.
</p>
</section>
<section>
<h3>Box Scale Test</h3>
<section class="grid">
<div class="box size_32"><span class="i i_ui_update_sm"></span></div>
<div class="box size_64"><i class="i i_ui_update_sm"></i></div>
<div class="box size_96"><i class="i i_ui_update_sm"></i></div>
<div class="box size_128"><i class="i i_ui_update_sm"></i></div>
<div class="box size_160"><i class="i i_ui_update_sm"></i></div>
</section>
</section>
<section>
<h3>Box Scale Test</h3>
<section class="grid">
<div class="box size_32"><span class="i">☰</span></div>
<div class="box size_64"><span class="i">☰</span></div>
<div class="box size_96"><span class="i">☰</span></div>
<div class="box size_128"><span class="i">☰</span></div>
<div class="box size_160"><span class="i">☰</span></div>
</section>
</section>
</body>
</html>