antddesign使用iconfont

使用iconfont自定义字体

1️⃣选择一种需要的字体，点击【字体包下载】：

2️⃣下载好的字体放到项目目录下：src/assets/fonts：

3️⃣新建styles/font.css文件：

/* src/styles/fonts.css */
@font-face {font-family: 'AlibabaFont';src: url('../assets/fonts/DingTalk-JinBuTi.ttf') format('truetype');font-weight: normal;font-style: normal;
}@font-face {font-family: 'CustomFont';src: url('../assets/fonts/AlimamaDaoLiTi.woff2') format('truetype');font-weight: normal;font-style: normal;
}

4️⃣在main.js中引入css文件：

import './styles/fonts.css';

5️⃣使用：

<span style={{color: isDarkMode ? '#fff' : '#000', fontFamily: 'AlibabaFont', fontSize:'22px'}}>网站大全</span>

使用iconfont自定义图标

1️⃣示例代码：

import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';const MyIcon = createFromIconfontCN({scriptUrl: '//at.alicdn.com/t/c/font_4937277_0wwxhhewlfl.js',  // 替换成你的链接
});const App = () => {return (<div><MyIcon type="icon-your-custom-icon" style={{ width: '20px', height: '20px', color: '#1890ff' }} /></div>);
};export default App;

2️⃣如何获取链接，新建项目，将所需要的图标添加到项目中，切换到【Symbol】选项卡，即可查看js链接，记得替换type：