Created
January 7, 2024 02:33
-
-
Save LintangWisesa/2d8e778fd9505fd38f1f55c109380d88 to your computer and use it in GitHub Desktop.
Lineicons Tutorial
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Lineicons Tutorial</title> | |
| <!-- Lineicons CDN --> | |
| <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" /> | |
| <!-- local css lineicons --> | |
| <link href="lineicons-4.0-basic-free/web-font-files/css/icons.css" rel="stylesheet" type="text/css"/> | |
| </head> | |
| <body> | |
| <h1>Lineicons Tutorial</h1> | |
| <!-- webfont --> | |
| <h3>1. Webfonts</h3> | |
| <i class="lni lni-python"></i> | |
| <i class="lni lni-python" style="font-size: xx-small;"></i> | |
| <i class="lni lni-python" style="font-size: x-small;"></i> | |
| <i class="lni lni-python" style="font-size: small;"></i> | |
| <i class="lni lni-python" style="font-size: medium;"></i> | |
| <i class="lni lni-python" style="font-size: large;"></i> | |
| <i class="lni lni-python" style="font-size: x-large;"></i> | |
| <i class="lni lni-python" style="font-size: xx-large;"></i> | |
| <i class="lni lni-python" style="font-size: 25px"></i> | |
| <i class="lni lni-python" style="font-size: 10%"></i> | |
| <i class="lni lni-python" style="color: red;"></i> | |
| <i class="lni lni-python" style="color: #ffff00"></i> | |
| <i class="lni lni-python" style="color: rgb(0,255,0)"></i> | |
| <!-- svg images --> | |
| <h3>2. SVG Images</h3> | |
| <img src="img/python.svg"/> | |
| <img height="20px" width="20px" src="img/python.svg"/> | |
| <img src="img/python.svg" | |
| style="filter: invert(53%) sepia(78%) saturate(2300%) hue-rotate(158deg) brightness(90%) contrast(101%);" | |
| /> | |
| <img height="20px" width="20px" src="lineicons-4.0-basic-free/svg-files/Education/library.svg"/> | |
| <!-- svg code --> | |
| <h3>3. SVG Code</h3> | |
| <svg fill="yellow" width="52" height="52" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M61.7 23.9996C60.6 19.7996 58.6 16.4996 54.4 16.4996H48.8V23.0996C48.8 28.1996 44.4 32.4996 39.7 32.4996H24.8C20.7 32.4996 17.5 35.9996 17.5 40.0996V54.1996C17.5 58.0996 21 60.4996 24.8 61.7996C29.4 63.1996 33.9 63.4996 39.6 61.7996C43.3 60.6996 46.9 58.5996 46.9 54.1996V48.5996H32.2V46.7996H54.4C58.6 46.7996 60.3 43.7996 61.7 39.2996C63.2 34.3996 63.2 29.8996 61.7 23.9996ZM40.5 51.9996C42 51.9996 43.3 53.2996 43.3 54.7996C43.3 56.2996 42 57.5996 40.5 57.5996C39 57.6996 37.7 56.2996 37.7 54.7996C37.6 53.2996 38.9 51.9996 40.5 51.9996ZM24.1 30.5996H38.9C43 30.5996 46.2 27.1996 46.2 22.9996V9.09961C46.2 5.19961 42.8 2.19961 38.9 1.49961C34 0.799609 28.6 0.799609 24.1 1.49961C17.8 2.59961 16.8 4.89961 16.8 9.09961V14.6996H31.6V16.4996H11.4C7.2 16.4996 3.4 19.1996 2.3 23.9996C0.9 29.5996 0.9 33.0996 2.3 38.8996C3.4 43.2996 5.8 46.3996 10.2 46.3996H15V39.6996C14.9 34.7996 19.2 30.5996 24.1 30.5996ZM23.2 10.8996C21.7 10.8996 20.4 9.59961 20.4 8.09961C20.4 6.59961 21.7 5.29961 23.2 5.29961C24.7 5.29961 26 6.59961 26 8.09961C26 9.59961 24.7 10.8996 23.2 10.8996Z"/></svg> | |
| <svg fill="#0000FF" width="24" height="24" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path d="M61.7 23.9996C60.6 19.7996 58.6 16.4996 54.4 16.4996H48.8V23.0996C48.8 28.1996 44.4 32.4996 39.7 32.4996H24.8C20.7 32.4996 17.5 35.9996 17.5 40.0996V54.1996C17.5 58.0996 21 60.4996 24.8 61.7996C29.4 63.1996 33.9 63.4996 39.6 61.7996C43.3 60.6996 46.9 58.5996 46.9 54.1996V48.5996H32.2V46.7996H54.4C58.6 46.7996 60.3 43.7996 61.7 39.2996C63.2 34.3996 63.2 29.8996 61.7 23.9996ZM40.5 51.9996C42 51.9996 43.3 53.2996 43.3 54.7996C43.3 56.2996 42 57.5996 40.5 57.5996C39 57.6996 37.7 56.2996 37.7 54.7996C37.6 53.2996 38.9 51.9996 40.5 51.9996ZM24.1 30.5996H38.9C43 30.5996 46.2 27.1996 46.2 22.9996V9.09961C46.2 5.19961 42.8 2.19961 38.9 1.49961C34 0.799609 28.6 0.799609 24.1 1.49961C17.8 2.59961 16.8 4.89961 16.8 9.09961V14.6996H31.6V16.4996H11.4C7.2 16.4996 3.4 19.1996 2.3 23.9996C0.9 29.5996 0.9 33.0996 2.3 38.8996C3.4 43.2996 5.8 46.3996 10.2 46.3996H15V39.6996C14.9 34.7996 19.2 30.5996 24.1 30.5996ZM23.2 10.8996C21.7 10.8996 20.4 9.59961 20.4 8.09961C20.4 6.59961 21.7 5.29961 23.2 5.29961C24.7 5.29961 26 6.59961 26 8.09961C26 9.59961 24.7 10.8996 23.2 10.8996Z"/></svg> | |
| <svg fill="red" height="24" width="24" version="1.1" id="lni_lni-graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" | |
| y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"> | |
| <g> | |
| <path d="M46.3,12.9c-3.6,0-6.5,2.9-6.5,6.5c0,0.2,0,0.5,0,0.7l-2.4,1.6l-2.7-0.9c-0.8-2.7-3.3-4.6-6.2-4.6c-3.6,0-6.5,2.9-6.5,6.5 | |
| c0,0.6,0.1,1.1,0.2,1.6c-0.7,0.6-1.6,1.2-2.3,1.8c-1.1-0.7-2.3-1.2-3.7-1.2c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5 | |
| s6.5-2.9,6.5-6.5c0-0.6-0.1-1.1-0.2-1.6c0.7-0.6,1.6-1.2,2.3-1.8c1.1,0.7,2.3,1.2,3.7,1.2c2.6,0,4.8-1.5,5.9-3.7l2,0.7 | |
| c0.4,0.1,0.7,0.2,1.1,0.2c0.7,0,1.4-0.2,2-0.6l2.3-1.5c1.2,1.1,2.7,1.7,4.4,1.7c3.6,0,6.5-2.9,6.5-6.5S49.9,12.9,46.3,12.9z | |
| M16.2,33.4c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S17.3,33.4,16.2,33.4z M28.5,24.6c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 | |
| S29.6,24.6,28.5,24.6z M46.3,21.4c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S47.4,21.4,46.3,21.4z"/> | |
| <path d="M57,5.9H7c-3.4,0-6.3,2.8-6.3,6.3v26.4c0,3.4,2.8,6.3,6.3,6.3h22.8v8.8H18.8c-1.2,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3h26.4 | |
| c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3H34.3v-8.8H57c3.4,0,6.3-2.8,6.3-6.3V12.1C63.3,8.7,60.4,5.9,57,5.9z M58.8,38.5 | |
| c0,1-0.8,1.8-1.8,1.8H7c-1,0-1.8-0.8-1.8-1.8V12.1c0-1,0.8-1.8,1.8-1.8h50c1,0,1.8,0.8,1.8,1.8V38.5z"/> | |
| </g> | |
| </svg> | |
| <svg height="24" width="24" version="1.1" id="lni_lni-graph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" | |
| y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"> | |
| <g> | |
| <path fill="blue" d="M46.3,12.9c-3.6,0-6.5,2.9-6.5,6.5c0,0.2,0,0.5,0,0.7l-2.4,1.6l-2.7-0.9c-0.8-2.7-3.3-4.6-6.2-4.6c-3.6,0-6.5,2.9-6.5,6.5 | |
| c0,0.6,0.1,1.1,0.2,1.6c-0.7,0.6-1.6,1.2-2.3,1.8c-1.1-0.7-2.3-1.2-3.7-1.2c-3.6,0-6.5,2.9-6.5,6.5s2.9,6.5,6.5,6.5 | |
| s6.5-2.9,6.5-6.5c0-0.6-0.1-1.1-0.2-1.6c0.7-0.6,1.6-1.2,2.3-1.8c1.1,0.7,2.3,1.2,3.7,1.2c2.6,0,4.8-1.5,5.9-3.7l2,0.7 | |
| c0.4,0.1,0.7,0.2,1.1,0.2c0.7,0,1.4-0.2,2-0.6l2.3-1.5c1.2,1.1,2.7,1.7,4.4,1.7c3.6,0,6.5-2.9,6.5-6.5S49.9,12.9,46.3,12.9z | |
| M16.2,33.4c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S17.3,33.4,16.2,33.4z M28.5,24.6c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 | |
| S29.6,24.6,28.5,24.6z M46.3,21.4c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S47.4,21.4,46.3,21.4z"/> | |
| <path fill="green" d="M57,5.9H7c-3.4,0-6.3,2.8-6.3,6.3v26.4c0,3.4,2.8,6.3,6.3,6.3h22.8v8.8H18.8c-1.2,0-2.3,1-2.3,2.3s1,2.3,2.3,2.3h26.4 | |
| c1.2,0,2.3-1,2.3-2.3s-1-2.3-2.3-2.3H34.3v-8.8H57c3.4,0,6.3-2.8,6.3-6.3V12.1C63.3,8.7,60.4,5.9,57,5.9z M58.8,38.5 | |
| c0,1-0.8,1.8-1.8,1.8H7c-1,0-1.8-0.8-1.8-1.8V12.1c0-1,0.8-1.8,1.8-1.8h50c1,0,1.8,0.8,1.8,1.8V38.5z"/> | |
| </g> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment