rotala-extension-css-icon
Version:
icon extension for rotala.css framework
91 lines (85 loc) • 4.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/thin.css">
<link rel="stylesheet" href="assets/css/thick.css">
<link rel="stylesheet" href="//unpkg.com/tailwindcss@%5E1.0/dist/tailwind.min.css">
</head>
<body>
<main class="mx-auto my-32 px-8 max-w-6xl">
<h4>Icons: thin</h4>
<div class="align-middle">
<i class="thin-icon thin-icon-close m-8"></i>
<i class="thin-icon thin-icon-search m-8"></i>
<i class="thin-icon thin-icon-menu m-8"></i>
<i class="thin-icon thin-icon-attachment m-8"></i>
<i class="thin-icon thin-icon-check m-8"></i>
<i class="thin-icon thin-icon-chevron-up m-8"></i>
<i class="thin-icon thin-icon-chevron-right m-8"></i>
<i class="thin-icon thin-icon-chevron-down m-8"></i>
<i class="thin-icon thin-icon-chevron-left m-8"></i>
<i class="thin-icon thin-icon-arrow-up m-8"></i>
<i class="thin-icon thin-icon-arrow-right m-8"></i>
<i class="thin-icon thin-icon-arrow-down m-8"></i>
<i class="thin-icon thin-icon-arrow-left m-8"></i>
<i class="thin-icon thin-icon-mail m-8"></i>
<i class="thin-icon thin-icon-bookmark m-8"></i>
<i class="thin-icon thin-icon-plus m-8"></i>
<i class="thin-icon thin-icon-minus m-8"></i>
<i class="thin-icon thin-icon-edit m-8"></i>
<i class="thin-icon thin-icon-ellipsis m-8"></i>
<i class="thin-icon thin-icon-ellipsis-vertical m-8"></i>
</div>
<br>
<h4>Icons: thick</h4>
<div class="align-middle">
<i class="thick-icon thick-icon-close m-8"></i>
<i class="thick-icon thick-icon-search m-8"></i>
<i class="thick-icon thick-icon-menu m-8"></i>
<i class="thick-icon thick-icon-attachment m-8"></i>
<i class="thick-icon thick-icon-check m-8"></i>
<i class="thick-icon thick-icon-chevron-up m-8"></i>
<i class="thick-icon thick-icon-chevron-right m-8"></i>
<i class="thick-icon thick-icon-chevron-down m-8"></i>
<i class="thick-icon thick-icon-chevron-left m-8"></i>
<i class="thick-icon thick-icon-arrow-up m-8"></i>
<i class="thick-icon thick-icon-arrow-right m-8"></i>
<i class="thick-icon thick-icon-arrow-down m-8"></i>
<i class="thick-icon thick-icon-arrow-left m-8"></i>
<i class="thick-icon thick-icon-mail m-8"></i>
<i class="thick-icon thick-icon-bookmark m-8"></i>
<i class="thick-icon thick-icon-plus m-8"></i>
<i class="thick-icon thick-icon-minus m-8"></i>
<i class="thick-icon thick-icon-edit m-8"></i>
<i class="thick-icon thick-icon-ellipsis m-8"></i>
<i class="thick-icon thick-icon-ellipsis-vertical m-8"></i>
</div>
<br>
<h4>Size</h4>
<div class="align-middle">
<i class="thin-icon thin-icon-search text-xs m-8"></i>xs
<i class="thin-icon thin-icon-search text-sm m-8"></i>sm
<i class="thin-icon thin-icon-search text-base m-8"></i>base
<i class="thin-icon thin-icon-search text-lg m-8"></i>lg
<i class="thin-icon thin-icon-search text-xl m-8"></i>xl
<i class="thin-icon thin-icon-search text-2xl m-8"></i>2xl
<i class="thin-icon thin-icon-search text-3xl m-8"></i>3xl
<i class="thin-icon thin-icon-search text-4xl m-8"></i>4x
</div>
<div class="align-middle">
<i class="thick-icon thick-icon-search text-xs m-8"></i>xs
<i class="thick-icon thick-icon-search text-sm m-8"></i>sm
<i class="thick-icon thick-icon-search text-base m-8"></i>base
<i class="thick-icon thick-icon-search text-lg m-8"></i>lg
<i class="thick-icon thick-icon-search text-xl m-8"></i>xl
<i class="thick-icon thick-icon-search text-2xl m-8"></i>2xl
<i class="thick-icon thick-icon-search text-3xl m-8"></i>3xl
<i class="thick-icon thick-icon-search text-4xl m-8"></i>4x
</div>
</main>
</body>
</html>