Flat Icons & Icon Fonts | CSS-Tricks
Nice list of icon sets that come in the form of fonts.
I recommend Font Awesome Show archive.org snapshot .
Related cards:
Embed Font Awesome icons from your CSS
An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.
It doesn't have to be that way.
Copy the attached file `f...
Taming icon fonts for use in Rails views
Icon fonts like Font Awesome are infinitely scalable, look great on high-DPI displays and will give your app a modern look.
However, icon fonts can be very awkward to use compared to raster icons. El...
A modern approach to SVG icons
You have some SVG files you want to use as icons on your website. How would you embed them?
Common options are:
- Use them with an image:
<img src='path-to-icon.svg'> - Embed them inline with
<svg>$ICON</svg> - Embed them using CSS and `ba...
Legacy docs for Font Awesome 3.2.1
Font Awesome 4 has renamed all icons. What the fuck.
Check the attached link for an icon list for the old Font Awesome 3.2.1.
Note
The following icons are listed on the linked page but may not exis...
Webpack: Automatically generating an icon font from .svg files
Over the years we have tried several solution to have vector icons in our applications. There are many ways to achieve this, from SVGs inlined into the HTML, SVGs inlined in CSS, JavaScript-based solutions, to icon fonts.
Out of all these options...
Creating icon fonts with Icomoon
Icomoon.io offers a free app to build custom icon webfonts. It offers downloads as webfont set (.eot, .ttf, .woff, .woff2) or as icon set of SVG and/or PNG and many more file types, or even SVG sprites.
From my experience, the frontend develo...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeli...
Minify Font Awesome fonts with webpack
Font Awesome 5 is a comprehensive solution for vector icons on your website.
Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will...
CSS Fontstack: An overview of web/web safe font support
Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems...
Understanding grid sizes of (SVG) icons
A primer on vector graphics
For rastered image formats like JPG or PNG, each pixel is basically drawn on a fixed size canvas. To display such an image in a different size (say: 1.5 times larger than original), the renderer (your Browser / GPU...