Resizable SASS Icons

Developer
Marian Arlt
Size
7,611 Kb
Views
20,230
  1. Resizable SASS Icons Previews
  2. Resizable SASS Icons HTML Codes
  3. Resizable SASS Icons CSS Codes
  4. Resizable SASS Icons JS Codes

How do I make an resizable sass icons?

Pure CSS Icons written with relatively little SASS. Only one span needed and resizable! Change one variable to change icon size.. What is a resizable sass icons? How do you make a resizable sass icons? This script and codes were developed by Marian Arlt on 22 September 2022, Thursday.

Resizable SASS Icons Previews
IQ Test

Resizable SASS Icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Resizable SASS Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <h1>Sass Icons</h1> <h2><span class="icon previous"></span>&nbsp; Controls &nbsp;<span class="icon next"></span></h2> <div class="row"> <p> <!-- One span, that's all.--><span class="icon search"></span>Search </p> <p><span class="icon add"></span>Add</p> <p><span class="icon close"></span>Close</p> <p><span class="icon remove"></span>Remove</p> </div> <div class="row"> <p><span class="icon check"></span>Check</p> <p><span class="icon warning"></span>Warning</p> <p><span class="icon denied"></span>Denied</p> <p><span class="icon info"></span>Info</p> </div> <div class="row"> <p><span class="icon power"></span>Power</p> <p><span class="icon play"></span>Play</p> <p><span class="icon stop"></span>Stop</p> <p><span class="icon pause"></span>Pause</p> </div> <div class="row"> <p><span class="icon ffw"></span>Fast Forward</p> <p><span class="icon fbw"></span>Fast Backward</p> <p><span class="icon volume-on"></span>Volume On</p> <p><span class="icon volume-off"></span>Volume Off</p> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Resizable SASS Icons - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap;
}
::selection { color: white; background: PapayaWhip;
}
::-moz-selection { color: white; background: PapayaWhip;
}
html, body { min-height: 100%;
}
body { font: 400 16px "Droid Sans"; line-height: 1.5em; margin: 0; padding: 0; color: DarkSlateBlue; text-align: center; background-color: Salmon; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}
h1, h2 { margin: 0 auto; padding-bottom: 0.75em; border-bottom: PapayaWhip solid 1px; text-transform: uppercase; font-weight: 700;
}
h2 { font-size: 1em; padding-top: 0.75em; margin-bottom: 1em; font-weight: 700;
}
.container { position: absolute; top: 50%; left: 50%; width: 29rem; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.container div.row { display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-box-orient: vertical; display: -ms-flexbox; -ms-flex-direction: column; display: -webkit-flex; -webkit-flex-direction: column; display: flex; flex-direction: column; margin: 0.5rem 0; float: left;
}
.container div.row span { margin-right: 0.5rem;
}
p { text-align: left; margin: 0 3rem 0 0; width: 4rem; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
p:last-of-type { margin: 0 2.5rem 0 0;
}
.icon { height: 16px; width: 16px; display: inline-block; position: relative; vertical-align: middle; margin-top: -0.2em; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.icon:before, .icon:after { content: ""; position: absolute; display: block; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.icon:hover { border-color: PapayaWhip; cursor: pointer;
}
.icon:hover:before, .icon:hover:after { background: PapayaWhip;
}
p:hover, .icon:hover, p:hover > .icon { border-color: PapayaWhip; cursor: pointer; color: PapayaWhip;
}
p:hover > .icon:after, p:hover > .icon:before { background: PapayaWhip;
}
.search:before { height: 8px; width: 8px; border: 2px solid DarkSlateBlue; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px;
}
.search:after { height: 8px; width: 2px; background: DarkSlateBlue; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 8px; left: 10.4px;
}
.search:hover:before, p:hover > .search:before { background: transparent; border-color: PapayaWhip;
}
.add, .close, .check, .denied, .volume-off, .previous, .next, .remove, .info, .warning, .power, .play, .ffw, .fbw, .volume-on, .stop, .pause { -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; border: 2px solid DarkSlateBlue; width: 16px; height: 16px;
}
.add:before, .close:before, .check:before, .denied:before, .volume-off:before, .previous:before, .next:before, .remove:before, .info:before, .warning:before, .power:before, .play:before, .ffw:before, .fbw:before, .volume-on:before, .stop:before, .pause:before, .add:after, .close:after, .check:after, .denied:after, .volume-off:after, .previous:after, .next:after, .remove:after, .info:after, .warning:after, .power:after, .play:after, .ffw:after, .fbw:after, .volume-on:after, .stop:after, .pause:after { -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; background: DarkSlateBlue; height: 2px; top: 50%; left: 50%; margin-left: -4px; width: 8px; margin-top: -1px;
}
.add:after, .close:after, .check:after, .denied:after, .volume-off:after, .previous:after, .next:after, .remove:after, .info:after, .warning:after, .power:after, .play:after, .ffw:after, .fbw:after, .volume-on:after, .stop:after, .pause:after { width: 2px; top: 50%; margin-top: -4px; left: 50%; margin-left: -1px; height: 8px;
}
.close:before, .check:before, .denied:before, .volume-off:before, .previous:before, .next:before, .close:after, .check:after, .denied:after, .volume-off:after, .previous:after, .next:after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);
}
.remove:after { height: 0; width: 0;
}
.info:before, .warning:before { height: 2px; width: 2px; left: 50%; margin-left: -1px; top: 50%; margin-top: -4px;
}
.info:after, .warning:after { height: 5.33333px; top: 50%; margin-top: -1px;
}
.check:after { width: 2px; height: 4px; left: 50%; margin-left: -2.28571px; top: 50%; margin-top: -1.06667px;
}
.check:before { left: 50%; margin-left: -2px; width: 6.4px;
}
.warning { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
@-moz-document url-prefix() { .warning:before, .warning:after { width: 2px; margin-left: -1px; }
}
.power:before { height: 0; width: 0;
}
.power:after { top: 0; margin-top: -4px; left: 50%; margin-left: -3px; border: 2px solid Salmon;
}
.denied:after, .volume-off:after { height: 0;
}
.denied:before, .volume-off:before { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; width: 14px; left: 50%; margin-left: -7px;
}
.play:before, .ffw:before, .fbw:before, .volume-on:before { height: 0;
}
.play:after, .ffw:after, .fbw:after, .volume-on:after { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: transparent; border: 4px solid transparent; border-width: 4px 6px; border-left-color: DarkSlateBlue; height: 0; width: 0; left: 50%; margin-left: -2px; top: 50%;
}
.play:hover:after, .ffw:hover:after, .fbw:hover:after, .volume-on:hover:after { background: transparent; border-color: transparent; border-left-color: PapayaWhip;
}
p:hover > .play:after, p:hover > .ffw:after, p:hover > .fbw:after, p:hover > .volume-on:after { background: transparent; border-color: transparent; border-left-color: PapayaWhip;
}
.stop:before { height: 0;
}
.stop:after { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; height: 5.81818px; width: 5.81818px; left: 50%; margin-left: -2.88px; top: 50%; margin-top: -2.88px;
}
.pause:before { height: 8px; width: 2px; margin-top: -4px; margin-left: 0.77778px;
}
.pause:after { margin-left: -2.77778px;
}
.ffw:after, .fbw:after { margin-left: -2.66667px;
}
@-moz-document url-prefix() { .ffw:after, .fbw:after { margin-left: -2.76667px; }
}
.ffw:before, .fbw:before { height: 8px; width: 2px; margin-top: -4px; margin-left: 1.76px;
}
@-moz-document url-prefix() { .ffw:before, .fbw:before { margin-left: 1px; width: 1.9px; }
}
.fbw { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.volume-on:after { margin-left: -10px; border-left-color: transparent; border-right-color: DarkSlateBlue; margin-left: -10.66667px;
}
.volume-on:before { -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; border: 1.33333px solid transparent; border-right-color: DarkSlateBlue; height: 5.6px; width: 5.6px; background: transparent; margin-top: -3.9px; margin-left: -3.9px;
}
@-moz-document url-prefix() { .volume-on:before { margin-top: -3.5px; }
}
.volume-on:hover:after, .volume-on:hover:before { background: transparent; border-color: transparent; border-right-color: PapayaWhip;
}
p:hover > .volume-on:after, p:hover > .volume-on:before { background: transparent; border-color: transparent; border-right-color: PapayaWhip;
}
.volume-off:after { -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: transparent; border: 4px solid transparent; border-width: 4px 6px; height: 0; width: 0; left: 50%; margin-left: -2px; top: 50%; margin-left: -10.66667px; border-left-color: transparent; border-right-color: DarkSlateBlue;
}
.volume-off:hover:after { background: transparent; border-color: transparent; border-right-color: PapayaWhip;
}
p:hover > .volume-off:after { background: transparent; border-color: transparent; border-right-color: PapayaWhip;
}
.previous:before, .next:before { width: 6px; margin-top: -2px; margin-left: -3px;
}
.previous:after, .next:after { height: 6px; margin-top: -2px; margin-left: -1px;
}
.next { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);
}

Resizable SASS Icons - Script Codes JS Codes

/*
Important note: if you're on Chrome or Opera and the icons ain't centered, resize your browser width to an EVEN number (see bugs).
Change log:
2014-03-13: With a bunch of CSS hacks working at 16px and 18px consistent on OSX in Chrome 33, Opera 20, Firefox 27 and Safari 7 (with issues described in bugs at 16px)
2014-03-12: For now works best in Chrome & Opera.
---
The IDEA OF THIS PEN is to reduce the effort of coding big loads of css for one particular icon size using sass maths and variables.
The icons rely heavily on calculation. Since browsers handle maths very different from each other there's differences between rendering. While on very big sizes this really doesn't matter that much, on a micro scale, which is what most icon fonts are used for, every pixel matters.
BUGS/ISSUES:
Safari:
Always rounds pixels down. This makes the rectangle of the stop icon miss a pixel in height and width, making it look awkward. Same with the inner margin of the pause icon.
Chrome & Opera:
Noticed a very weird behaviour here when you change viewport width to an odd number like 801px. This makes everything move one pixel except some pseudo elements making everything look off. Really strange.
Firefox:
Holy moly! Just without words, Firefox breaks almost everything...
Updated with css hacks. Looks ok now.
---
Although a nice alternative to fonts, the real issue with this is browser zoom. You can optimize the shit out of these things, browser zoom will distort them. (The magnifying glass works surprisingly well)
You could probably use JS to detect the current zoom level and based on the result apply more rules. Imagine the bloat in size and the weeks of optimizing positions. Very contrary to what I tried to accomplish with this pen. I would've done more of these if the zoom thing hadn't interfered.
Take note that this also happens to hard coded pixel built css icons! You might wanna do some CTRL +/- on these sites:
http://nicolasgallagher.com/pure-css-gui-icons/demo/
https://cssdeck.com/labs/css3-monochrome-icon-set
http://www.uiplayground.in/css3-icons/
And beware: perfection is in detail.
So while I really love the idea of css icons, it's as if one would try to make a css alphabet. Not that it wouldn't be possible or a funny pen (any takers?), but it just won't work well. From my very point of view there's absolutely no doubt about the typographic and mechanical advantages of icon fonts. */
Resizable SASS Icons - Script Codes
Resizable SASS Icons - Script Codes
Home Page Home
Developer Marian Arlt
Username marianarlt
Uploaded September 22, 2022
Rating 4
Size 7,611 Kb
Views 20,230
Do you need developer help for Resizable SASS Icons?

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!

Marian Arlt (marianarlt) Script Codes
Name
Under Construction
Pop-Up Form
CSS Vanilla Parallax
Minimal Search Form
Semi-responsive team presentation
CSS Custom Properties
SVG Path Animation
Vanilla sticky navigation with slide out
Vanilla Full Page Scroll
Create amazing blog posts with AI!

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!