antd localizes the icon icon

Problem: After the front-end developed with reactjs+antd is migrated to the intranet, the font icon is lost

solve:

1. Download the icon from the official resource library, address: http://1x.ant.design/docs/resource/download

2. Delete the content of demo*, and create a new folder for the remaining files and put them in any location of the project

3. If you want to use an icon in a page, add the following content to the css file of the page:

@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- */
}

Among them, the location of the url can be changed according to the actual location.

Then in the same place add:

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

The test found that the icon has no padding, and the padding can be adjusted appropriately, such as padding-left: 10px

4. When using:

<i className="iconfont"></i>