Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
[css-icon] CSS isn't used for icons - it should be #4295
I'm developing a new front-end for the IoT OS "ESP Easy" and we really don't want to have any dependencies. Thus I have created my own framework called "guiEasy" which consists of a plain CSS file. The idea is to have everything modular and thus all element styling depend on global and element based variables to manipulate the GUI.
Font Awesome has become defacto standard for icons which seems a bit weird since we should have a standard for icons and not rely on third party aid. Font based icons are a hack, not a standard in my opinion. So... to get rid of static (but often nice looking) font based icons and hard to tweak SVG based icons I stumbled upon this page:
It is a hackish way of creating icons using pure CSS and I have been starting to create icons this way. Not that I suggest all should create icons this way but as a proof of concept. You may see how this is done here: https://grovkillen.com/guieasy
My idea is that CSS should be the main source of styling icons as well as everything else. That way the icons can adapt to not only color but form and style and even be animated. If you mess around with the radius on the above site (main tab, radius=1 for very round style, radius=2...7 for semi round, radius=100 for sharp style) and you'll see that the icons themselves adapt to this style.
So my suggestion:
The above HTML element would be able to be styled using layers:
The background is ALWAYS on bottom
Badge = a notifying small element which could be used to show numbers of unread messages etc. It may fetch it's value from a set attribute.
You can now combine multiple "keyframes" which are defined in the
The icon element is by design always NxN in size and will (if not override) obey the size (height) of the font scope it's part of. Internal origo (for it's own shapes etc) should be defined by default from 0,0=center-center and then you can place the different layers in arrays X&Y...-X&-Y and orthogonality (R&Angle). Overflow is by design hidden within the NxN. By design you're not allowed to have more than one closed figure per icon-layer. The closed area is colored by the
BAD IDEA or GREAT IDEA?
PS. a battery icon (as an example) doesn't have to have multiple icons to represent charging, battery level etc. it could just adjust a attribute value or add/remove a class etc. As an example you may add the class "one, two, three, four, or five" to have the wifi signal strength icon on my above linked site to have the bars filled in. Change the attribute for signal strength and you'll see that the dBm is updated in the icon as well.
WICG discussion thread:
The WICG discussion now have three child threads: