This plugin tries to keep the usage and maintenance of icon fonts as simple as possible.
Browser Support: IE9 - IE11 and all modern browsers
npm i --save-dev iconfont-webpack-plugin
var IconfontWebpackPlugin = require('iconfont-webpack-plugin');
// make sure you use the postcss loader:
module: {
loaders: [
{
test: /\.css$/,
loader: 'css-loader!postcss-loader'
}
]
},
// add the plugin
plugins: [
new IconfontWebpackPlugin()
]
var IconfontWebpackPlugin = require('iconfont-webpack-plugin');
// make sure you use the postcss loader:
module: {
loaders: [
{
test: /\.css$/,
loader: 'css-loader!postcss-loader'
}
]
},
// add the plugin
plugins: [
new IconfontWebpackPlugin({
fontNamePrefix: 'custom-'
})
]
After setting up the plugin your css has now a new feature:
font-icon
declarations
a:before {
font-icon: url('./account.svg');
transition: 0.5s color;
}
a:hover:before {
color: red;
}
and it will be compiled into:
@font-face {
font-family: i96002e;
src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAA.....IdAA==") format('woff');
}
a:before {
font-family: i96002e;
content: '\E000';
transition: 0.5s color;
}
a:hover:before {
color: red;
}
Shorthand for setting the icon size and the icon:
a:before {
font-icon: 80% url('./account.svg');
}
No.
Icon fonts are really good for decorative icons (where the icon is purely ornamental and doesn’t incorporate core meaning or functionality).
For critical icons without fallbacks (like a hamburger menu icon) you should rather use SVGs. But also JPEGs, PNGs and even GIFs have their use cases.
Pick the best solution for your problem - there is no silver bullet. With this plugin it is pretty easy to use pixel images, svgs and font-icons side by side.
SVGs have some disadvantages and lack certain features especially when used inside pseudo elements:
- CSS-Transform issues in older Internet Explorer versions
- IE9 - IE 11 scaling issues
- Fill color doesn't work for background SVG images
- Inline SVGs are resolved relative to the page not to the css
Like all technologies there are disadvantages when using icon fonts.
We tried to apply best practices to solve the main issues for you.
- Screen Reader friendly: All generated icons use the Unicode Private Use Areas
- Prevents FOUT
This project is licensed under MIT.