CSS Icons

Submitted by abitowhit on Mon, 08/06/2018 - 17:28
This page will include some easy to use css strings that will create graphics that you can use instead of loading actual images.
More fun to play with but does come in handy when you want dynamically generated, simple images.
This can really be beneficial when you are generating page content dynamically and do not want to have to worry about having to know where an image is. As I create more, I will post them here.
CSS File Icons:

Can be used by prefacing a div tag with the style before "a href" links to designate there is a file to be downloaded
<div style="height:12px;width:8px;border-radius:2px;font-size:xx-small;border-width:1px;border-color:purple;border-style:solid;margin-right:8px;color:purple">=</div> <a href="url.com">Click</a>

style="height:12px;width:8px;border-radius:2px;font-size:xx-small;border-width:1px;border-color:purple;border-style:solid;margin-right:8px;color:purple"
Example:
=
Classes Page

style="height:20px;width:16px;border-radius:2px;font-size:xx-small;border-width:1px;border-color:black;border-style:solid;margin-right:8px;color:black;float:left;font-size:x-large"
^
zippidydoo.zip

style="height:20px;width:16px;border-radius:2px;border-top-right-radius:0px;font-size:xx-small;border-width:1px;border-color:black;border-style:solid;margin-right:8px;color:white;float:left;font-size:x-large"
+
anudderfile.zip
Note: on this one, I had to use a span tag on the + sign to move it up using a -4px top-margin style tag.