Icon fonts are a popular solution to a common CSS problem; how to incorporate web icons into your website design in an efficient, fast-loading way. Icon fonts are all over the internet. But what exactly is an icon font? And how do you use them? Download thousands of stunning premium fonts and typefaces with an Envato Elements membership.
Icon fonts are typefaces that use tiny images rather than letterforms. Like type, each character is scalable and can be modified using CSS. The main reasons for using an icon font are that you can change the size, color, shape, with ease. Icon fonts are transparent by nature so you can put them on any color or type of background and you can add strokes or change the opacity of icons. This is great for keeping your website and code lightweight.
Also note that if you change the font-size or color of the icon's container, the icon changes. Same things goes for shadow, and anything else that gets inherited using CSS. The fa-ul and fa-li classes are used to replace default bullets in unordered lists. The fa-border , fa-pull-right or fa-pull-left classes are used for pull quotes or article icons.
The fa-spin class gets any icon to rotate, and the fa-pulse class gets any icon to rotate with 8 steps. To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x class for the regularly sized icon, and fa-stack-2x for the larger icon. The fa-inverse class can be used as an alternative icon color. The styles below make it easy to apply our recommended sizes, colors, and activity states. Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines , we recommend them to be shown in either 18, 24, 36 or 48px.
The default being 24px. Material icons look best at 24px, but if an icon needs to be displayed in an alternative size, using the above CSS rules can help:. Using the icon font allows for easy styling of an icon in any color. The material icons are provided as SVGs that are suitable for web projects. Individual icons are downloadable from the material icons library.
The SVGs are also available from the material design icons git repository under the path:. If multiple icons are in use on a web site, creating spritesheets out of the images is recommended. For more information, refer to the documentation in the sprites directory of the git repository. PNG is the most traditional way to display icons on the web.
Our downloads from the material icons library provide both single and double densities for each icon. Icons are also available in the git repository under:. For more information, refer to recommendations in the sprites directory in the git repository.
PNGs suitable for Android are available from the material icons library. These come in all the supported screen densities so they should look good on any device. The icons are also available in the material design icons git repository in the same combination of colors and sizes named as follows:.
A density-independent VectorDrawable is provided which is supported from Android Lollipop and later:. The Vector Drawable is currently only available as a black 24dp icon. This is for compatibility with our most standard icon size. As the content property isn't supported in older browsers, these also make use of images.
If your question is how a CSS class can insert a specific character that will be rendered as an icon in the special font , take a look at the source for FontAwesome :. So a CSS content directive is used to insert the character which is from a special private-use reserved area of Unicode that does not mess up other readers.
It then uses font-face to load a dingbat webfont that styles the injected glyph. The upshot is that that injected glyph becomes the desired icon. Read more, how to create webfont icon at Responsive Webfont Icons. Stack Overflow for Teams — Collaborate and share knowledge with a private group.
Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Icon Fonts: How do they work? Ask Question. Asked 8 years, 7 months ago. Active 2 years, 8 months ago. Viewed 45k times. Improve this question.
0コメント