首页 > Web开发 > 详细

webpack中如何使用图标字体

时间:2017-12-23 13:56:40      阅读:399      评论:0      收藏:0      [点我收藏+]

 

1.webpack安装相关依赖

$ npm install font-awesome-webpack less less-loader css-loader style-loader file-loader font-awesome

2.配置webpack.config.js

module.exports = {
    entry: ‘./index.js‘,
    output: {
        path: path.join(__dirname, ‘./dist‘),
        publicPath: ‘/dist/‘,
        filename: ‘index.js‘
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: ‘vue-loader‘,
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: ‘css-loader‘,
                            fallback: ‘vue-style-loader‘
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: ‘babel-loader‘,
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ‘css-loader‘,
                    fallback: ‘style-loader‘
                })
            },
            {
                test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
                loader: ‘url-loader?limit=1024‘
            }
        ]
    }

3.入口文件引入

import ‘font-awesome-webpack‘;

4.打包后生成的图标字体

<i data-v-71776bc3="" class="fa fa-home fa-2x"></i>

5.显示结果如下:

技术分享图片

详情请参考:http://fontawesome.io/

webpack中如何使用图标字体

原文:http://www.cnblogs.com/shengnan-2017/p/8093030.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!