乐趣区

关于前端:iconfont使用及webpack打包字体图标

jiezi

一、iconfont 应用
    官网：https://www.iconfont.cn/
    1、找到须要的 icon 图标，增加至购物车

2、购物车中点击增加至我的项目，可退出到 GitHub 的我的项目中, 也可间接下载到本地

3、援用图标

unicode 援用
unicode 是字体在网页端最原始的利用形式，特点是：

  • 兼容性最好，反对 ie6+，及所有古代浏览器。
  • 反对按字体的形式去动静调整图标大小，色彩等等。
  • 然而因为是字体，所以不反对多色。只能应用平台里单色的图标，就算我的项目里有多色图标也会主动去色。
    应用步骤：
    第一步：拷贝我的项目上面生成的 font-face


第二步：定义应用 iconfont 的款式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：筛选相应的图标并获取字体编码，利用于页面

<i class='iconfont'>&#xe61d;</i>

4、font-class 援用
font-class 是 unicode 应用形式的一种变种，次要是解决 unicode 书写不直观，语意不明确的问题。
与 unicode 应用形式相比，具备如下特点：

  • 兼容性良好，反对 ie8+，及所有古代浏览器。
  • 相比于 unicode 语意明确，书写更直观。能够很容易分辨这个 icon 是什么。
  • 因为应用 class 来定义图标，所以当要替换图标时，只须要批改 class 外面的 unicode 援用。
  • 不过因为实质上还是应用的字体，所以多色图标还是不反对的


应用步骤如下：
第一步：拷贝我的项目上面生成的 fontclass 代码，link 标签引入

//at.alicdn.com/t/font_xxxx.css

第二步：筛选相应图标并获取类名，利用于页面

<i class='iconfont icon-xxx'></i>

symbol 援用
这是一种全新的应用形式，应该说这才是将来的支流，也是平台目前举荐的用法。这种用法其实是做了一个 svg 的汇合，与下面两种相比具备如下特点：

  • 反对多色图标了，不再受单色限度。
  • 通过一些技巧，反对像字体那样，通过 font-size,color 来调整款式。
  • 兼容性较差，反对 ie9+, 及古代浏览器。
  • 浏览器渲染 svg 的性能个别，还不如 png。


应用步骤：
第一步：拷贝我的项目上面生成的 symbol 代码，script 标签引入：

//at.alicdn.com/t/font_xxxx.js

第二步：退出通用 css 代码（引入一次就行）:

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：筛选相应图标并获取类名，利用于页面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

下载到本地的援用办法如下：

二、webpack 打包
webpack.config.js 配置如下

module: {
    rules: [
        {exclude: /\.(js|json|html|css|less|scss|png|jpeg|jpg|gif)$/,  // 排除资源
            loader: 'file-loader',
            options: {
                outputPath: 'iconfont/',
                publicPath: './iconfont',
                name: '[name][hash:8].[ext]'
            }
        }
    ]
}

退出移动版