Inline Styled SVG Icons
How do I make an inline styled svg icons?
What is a inline styled svg icons? How do you make a inline styled svg icons? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.
Inline Styled SVG Icons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline Styled SVG Icons</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
body { font-family: 'Open Sans';
}
</style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rlgxqp.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg style="display:none;" xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-check" viewBox="0 0 22 18"> <path fill-rule="evenodd" d="M18.583 0l-10.6 10.6-4.566-4.593L0 9.397l7.983 8.01L22 3.392"/> </symbol>
</svg>
<div class="box"> <svg class="check"> <use xlink:href="#icon-check"></use> <svg>
</div>
<div class="box"> <svg class="check"> <use xlink:href="#icon-check"></use> <svg>
</div>
<div class="box"> <svg class="check"> <use xlink:href="#icon-check"></use> <svg>
</div>
<div class="box"> <svg class="check"> <use xlink:href="#icon-check"></use> <svg>
</div>
<div class="box"> <svg class="check"> <use xlink:href="#icon-check"></use> <svg>
</div>
</body>
</html>
Inline Styled SVG Icons - Script Codes CSS Codes
.check { fill: #fff; width: calc(100% - 4px); height: calc(100% - 4px);
}
.box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 1rem; width: 1rem; border-radius: 2px; border: 1px solid #cacaca;
}
.box { -webkit-transition: all 150ms; transition: all 150ms;
}
.box:hover { background: rgba(22, 103, 161, 0.4); border: none;
}
.box:active { background: #1667a1; border: none;
}
body, html { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.box { margin: 0.25rem;
}
Developer | Kendrick Arnett |
Username | kendrick |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,542 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flexbox Resume Challenge | 10,625 Kb |
A11y Product Tile | 4,484 Kb |
SVG Social Icons | 4,587 Kb |
Postfix Badge Button | 2,345 Kb |
Variation Button Styles | 2,756 Kb |
Linkish Buttons | 2,357 Kb |
Include-media Include | 10,238 Kb |
Reasonably Shadowed Button | 2,847 Kb |
SVG Button | 2,210 Kb |
Chunky Toggles | 2,821 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
GLSL Hills | Ykob | 6,991 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!