antd将icon图标本地化

问题：使用reactjs+antd 开发的前端迁移到内网后，字体图标丢失

解决：

1、到官方资源库下载图标，地址：http://1x.ant.design/docs/resource/download

2、删除demo*的内容，将剩下的文件新建一个文件夹放入工程的任意一个位置

3、如果要在某一个页面中使用图标，那么在该页面的css文件中添加一下内容:

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

其中，url的位置可以根据实际位置更改。

然后在相同位置添加：

.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;}

测试发现图标无padding，可以适当调整padding，如 padding-left: 10px

4、使用时：

<i className="iconfont">&#xe695;</i>

antd将icon图标本地化

猜你喜欢