在react中使用iconfont

一、基本使用

我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下：

1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件

2.在html中的使用：

使用类名方式：

    
    
这是一个iconfont

使用unicode方式

    
    
unicode方式

二、在react中使用iconfont

1.依然是将图标添加至购物车，添加至项目下载项目，找到包含iconfont.css的文件夹

2.改写iconfont.css文件

iconfont.css文件内容最初是这样的：

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1572420906446'); /* IE9 */
  src: url('iconfont.eot?t=1572420906446#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/....') format('woff2'),
  url('iconfont.woff?t=1572420906446') format('woff'),
  url('iconfont.ttf?t=1572420906446') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-tuichu:before {
  content: "\e600";
}

然后我们对其进行改造，只保留其对字体文件的引用。

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1572420906446'); /* IE9 */
  src: url('iconfont.eot?t=1572420906446#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/...') format('woff2'),
  url('iconfont.woff?t=1572420906446') format('woff'),
  url('iconfont.ttf?t=1572420906446') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
}

3.随后在我们的css文件中或者.scss文件中引入这个文件（相对路径引入），并且将之前的iconfont.css文件中的.iconfont类放到这个文件中，在类iconfont中定义你的图标的字体大小和颜色等样式。

@import '../../../layout/management/iconFont/iconfont.css';


.itemInfo{
    .....
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 70px;
    line-height:1;
    color:#fff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

4.最后在react组件中引入上面的样式文件并使用iconfont

引入：

import React from 'react';
import S from './style.scss';

类名方式

unicode方式

    

另外如果在react使用变量方式写入unicode会出现问题：页面上不能显示字体图片了，而是直接显示字体编码

    {iconFont}

原因是字体编码后面四位是Unicode编码，想使用字符串来传递的话，传递的时候只要将 "" 改为 “\ue636” 即可。

最后作一下补充说明：

1. 由于我的项目是使用webpack中配置的css modules，为了不单独处理css文件不进行modules处理所以，这里采用的是unicode的方式来使用iconfont
2. 由于我们的iconfont文件引入了字体文件，所以在webpack的配置中需要配置/\.(woff|woff2|eot|ttf)$/使用file-loader

打包后的iconfont标签：

 可以看到我们的iconfont类被css modules处理过了。

图标正常显示：