一、基本使用
我们有时候需要像之前直接在html的head中引入iconfont的css文件,然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下:
1.先将图标加入购物车,然后下载项目,在html中引入其中的css文件
<link rel="stylesheet" href="./iconFont/iconfont.css">
2.在html中的使用:
使用类名方式:
<div class="itemInfo">
<i class="iconfont icon-info"></i>
<p>这是一个iconfont</p>
</div>
使用unicode方式
<div class="itemInfo">
<i class="iconfont"></i>
<p>unicode方式</p>
</div>
二、在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';
类名方式
<div className={S.itemInfo}>
<i className="iconfont icon-info"></i>
</div>
unicode方式
<div className={S.itemInfo}>
<i className={S.iconfont}></i>
</div>
另外如果在react使用变量方式写入unicode会出现问题:页面上不能显示字体图片了,而是直接显示字体编码
<div className={S.itemInfo}>
<i className={S.iconfont}>{iconFont}</i>
</div>
原因是字体编码后面四位是Unicode编码,想使用字符串来传递的话,传递的时候只要将 "" 改为 “\ue636” 即可。
最后作一下补充说明:
- 由于我的项目是使用webpack中配置的css modules,为了不单独处理css文件不进行modules处理所以,这里采用的是unicode的方式来使用iconfont
- 由于我们的iconfont文件引入了字体文件,所以在webpack的配置中需要配置/\.(woff|woff2|eot|ttf)$/使用file-loader
打包后的iconfont标签:
可以看到我们的iconfont类被css modules处理过了。
图标正常显示: