持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

回顾

上篇文章我说了一下怎么去iconfont.cn去下载字体图标，具体详情可看这里阿里字体图标（下载）。
下载下来的文件目录：
今天主要说一下如何在项目中使用，以及如何配置包括但不限于路径。

资料备齐，使用、配置字体图标

我们以webpack项目为栗子，其实在react项目中也是一样的。

项目里引入字体文件

我们先小试牛刀，把刚才下载下来的文件，直接放入我们的项目里，我们先引入一个iconfont.woff2文件。
目前我的目录是这样的：

安装对应的loader去解析字体图标文件

通过我之前webpack相关的文章我们知道，webpack默认是不支持除过js、json以外的文件格式，那么现在我们的woff2文件，webpack默认肯定也是不能解析的，我们需要一个loader去转换处理，file-loader可以完美转化解析,它可以处理图片，文字，音视频。
安装file-loader:
npm install file-loader

我安装的版本是6.2.0。安装成功后就要去webpack.config.js配置文件里去配置了：

这里配置看不太明白的同学们可以去看我webpack专栏里面的其他文章哦。

具体运用

这里我们，把woff2文件输出到css目录下。
我们test.less里面这样使用：

在less文件开头这样定义一下@font-face{...}，引入自己要使用的iconfont.woff2资料文件，然后声明一下自己使用的字体格式是woff2；
最后在css里面去声明.iconfont的样式，设置字体font-family就使用最开始的font-family里的值，这个也就是我们新建项目时，填写信息栏里面的值。

然后，别忘了html里面要使用一下： index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app'">
    这是一个webpack项目
    <span class="iconfont">&#xe698;</span>
</div>
</body>
</html>

span标签就是我们想要表现的内容，clss名就是我们less样式里声明的iconfont，这个前缀呢icon也是我们新建项目时定义的那个前缀：

HTML代码里面的就是复制下载下来资料demo_index.html里面的，要哪个字体图标就赋值哪个，放在这里就可以了。

然后src/index.js入口文件引入我们声明样式的test.less文件。 src/index.js:

import test from "./test.less";
console.log("hello 浅唱");

运行

执行构建：
npm run test

iconfont.woff2成功打包在css出口目录的css下面了。
看下dist/index.html:

我们看到了，里面引入了index.css，而index.css里面又是引入iconfont.woff2；

报错了？因为路径有问题

打开看下页面，是否成功显示。

并没有成功显示，还报了一个错，iconfont.woff2文件找不到。
我们看下dist/css/index.css：

去正确配置路径

路径有问题，我们再去webapck.config.js里面去重新配置一下输出路径：
因为index.css里找iconfont.woff2，应该这样就可以了./,所以publicPath: './'这样配置：

{
    test: /.woff2$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: '[name].[ext]',
                //资源输出的位置
                outputPath: 'css/',
                //资源引入的位置
                publicPath: './'
                //资源的路径+资源名称
            }
        }
    ],

}

name: 文件资源名称；
outputPath： 文件资源输出位置；
publicPath： 资源文件引入位置；
这里有个注意点：
name: 'css/[name].[ext]',这块这样设置，虽然也可以成功打包到css路径下，但是如果要加引入位置publicPath的话，就会有问题，依旧找不到资源文件，因为会把css/[name].[ext]当成一个整体的文件名，所以，还是老老实实把输出的位置写在outputPath里，这样写outputPath: 'css/'。
我们试错一下看看：

{
    test: /.woff2$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: 'css/[name].[ext]',
                //资源引入的位置
                publicPath: './'
                //资源的路径+资源名称
            }
        }
    ],

}

执行构建后：
我们看看路径还是不对，应该是./iconfont.woff2才对，怎么相对路径会多了一个css，因为就是把css/[name].[ext]当成一个整体的文件名，把前面的css当成iconfont.woff2本身的文件名。
还是改成这种写法：

{
    test: /.woff2$/,
    use: [
        {
            loader: "file-loader",
            options: {
                name: '[name].[ext]',
                //资源输出的位置
                outputPath: 'css/',
                //资源引入的位置
                publicPath: './'
                //资源的路径+资源名称
            }
        }
    ],

}

执行成功了，效果出来啦

看结果：

路径正确了；
看一下页面效果：
冰沙字体图标正确显示了呢；

接入彩色字体图标

我们看一下还有彩色的字体图标呢，看一下彩色的怎么搞；

引入`iconfont.js`，并进行配置

需要引入我们下载的资料iconfont.js在html里。那么需要把iconfont.js要设置为输出文件，首先设置为入口文件，如下配置：

iconfont.js是放在如下目录下：

到时候出口文件html里会自动引入iconfont.js。

编写css样式代码

我们加入红框里面的代码，设置宽度高度都是可以随意设置的，因为毕竟是个字体，这里我把第一次那个字体设置大了，然后彩色的图标我也设置的大一点。

选择相应图标并获取类名，应用于页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app'">这是一个webpack项目
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zhouzi"></use>
    </svg>
    <span class="iconfont">&#xe698;</span>

</div>
</body>
</html>

这里面的写法，直接粘贴我们下载下来资料里的就行，然后里面的类名什么的粘贴自己想要的图标就OK了。
最后再执行构建，看下打包效果：

我们看到打包里面多了一个iconfont.js。
再看一下dist/index.html:

iconfont.js也正常引入了。

彩色字体图标效果也出来啦

最后看页面效果：

彩色字体图标出来啦，大小也改变了，成功了。。。。。。

还可以Link的方式引入fontclass

步骤就是这样的：

最后玩一波

结尾

上面我们就完成了一个接入外部字体图标的一个操作，同学们也可以找其他的资源接入自己的项目，格式怎么写找的资源肯定都有说明，然后，遇到类似的配置，路径什么的，可以看我这里的做法思路，基本都是一样的。

webpack中如何使用、配置外部字体资源（阿里字体图标）

回顾