Last active
July 3, 2017 09:38
-
-
Save d-Pixie/5927335 to your computer and use it in GitHub Desktop.
Pure css and glyph font implementation of a mime type / file type icon. Using font awesome and Source Code Pro. I wanted to replace the small single glyphs used in one of my projects. My initial thought was to go for a simple image sprite, but since we just moved from glyphicons to font awesome for the other icons I figured there must be a way t…
This file contains 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> | |
| <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | |
| <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,900' rel='stylesheet' type='text/css'> | |
| <style> | |
| .icon-file-alt { | |
| position: relative; | |
| margin:0 2px; | |
| display: inline; | |
| } | |
| .icon-file-alt:after { | |
| position: absolute; | |
| /* Might need to tweak this to accommodate another font, see also the font tag. */ | |
| top: 1.32em; | |
| left: -5%; | |
| width: 110%; | |
| content: "EXT"; | |
| background: #F00; | |
| /* If you need to you can use this to "blind" off some of the background color. */ | |
| /* Usually needed to accommodate another font, you might need to adjust the font line as well. */ | |
| /* background: linear-gradient(#F00 0%,#F00 91%,transparent 92%); */ | |
| color: #FFF; | |
| /* The size/line-height value pait might need to be tweaked to accommodate another font. */ | |
| font: normal 800 0.36em/0.95em "Source Code Pro", sans-serif; | |
| text-align: center; | |
| } | |
| .icon-file-alt.png:after { | |
| background: #E0D; | |
| content: "PNG"; | |
| } | |
| .icon-file-alt.jpg:after, .icon-file-alt.jpeg:after { | |
| background: #0A0; | |
| content: "JPG"; | |
| } | |
| .icon-file-alt.gif:after { | |
| background: #00F; | |
| content: "GIF"; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>This is how it looks at 50% of designed size: <i class="icon-file-alt png" style="font-size:10px"></i></p> | |
| <p>This is how it looks at 80% of designed size: <i class="icon-file-alt jpg" style="font-size:16px"></i></p> | |
| <p>This is how it looks at 90% of designed size: <i class="icon-file-alt gif" style="font-size:18px"></i></p> | |
| <p>This is how it looks at 100% of designed size: <i class="icon-file-alt jpeg" style="font-size:20px"></i></p> | |
| <p>This is how it looks at 150% of designed size: <i class="icon-file-alt png" style="font-size:30px"></i></p> | |
| <p>This is how it looks at 200% of designed size: <i class="icon-file-alt gif" style="font-size:40px"></i></p> | |
| <p>This is how it looks at 400% of designed size: <i class="icon-file-alt jpg" style="font-size:80px"></i></p> | |
| </body> | |
| </html> |
404...
2 years later - 403 error 👍
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Pure CSS mime type/file type icon
So I was gonna sit down with my favorite image spriting service and glob together the set of file icons we use in a project. But it was nagging me to use images for this in the first place since we had just gotten rid of the glyphicons in favor of font awesome.
Figuring I could do it in CSS instead I set out and this is the result:
Adjustments
The styles are tailored for the Source Code Pro font, since it's momo space, nice and we already had it in our project. You can switch it to whatever font you want but you'll need to adjust for the font to make the colored background box look nice.
Adjusting background
Usually it's enough to switch font, fiddle with the font size so it fits horizontally, fiddle with the line height so the colored box covers the text vertically and then change the top offset to make sure it aligns ok on the background. You might have a situation where the colored background box gets a lot bigger than it has to, it happens ... This is when you have to make a choice. Change font, which is pretty ok as long as you choose a cross platform default, or start fiddling with the background...
I used a linear gradient during my initial testing (until I realized that Source Code Pro was behaving excellently without it) to make the parts of the background I didn't need transparent. It's easy enough and our app is internal and we can require people to run a recent version of Chrome when using it so that's nice. It might be a problem if you are building a public app, but I'll leave it up to thouse with the need to figure out a nice solution for it :)
More fiddles
There are a lot more you could do with this, from niceties like borders and gradients and rounded corners to useful tweaks fo a particular situation, but this was enough for our needs, so I stoped there.
Bye then!
If you use this anywhere or expand it for other uses I'd love to hear about it. But it's not required since I won't claim any rights for using the standards. Take it, keep it, modify it or rip it off. It's all good :)