网上找了很多解决方案都是针对Antd 旧版本,通过自己摸索,终于搞定……话不多说,直接贴图上代码
-
我的环境
Ant Design Pro 2.2.1
Antd:3.13.6
-
创建图标
Ant Design自带了一些图标,这个地址可以查看(https://ant.design/components/icon-cn/),但是符合项目中的图标很少,需要自己去设计或者去网上下载字体图标,这里推荐去https://www.iconfont.cn这个网站下载自己想要的图片,具体操作请参考这个网友的博客https://www.jianshu.com/p/2934316a5899
但值得注意的是,在新建项目的时候看下图说明,因为人家博客中的可能是低版本的做法,当然你FontClass前缀不取名icon-也是可以的,只不过要改改框架的代码,否则识别不了图标。
-
使用图标
这里使用图标有两种方式,
1、在线使用字体
将这个地址复制到你项目中
module.exports = {
navTheme: 'dark', // theme for nav menu
primaryColor: '#1890FF', // primary color of ant design
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: false, // sticky header
autoHideHeader: false, // auto hide header
fixSiderbar: false, // sticky siderbar
menu: {
disableLocal: false,
},
pwa: true,
// your iconfont Symbol Scrip Url
// 注意:如果需要图标多色,Iconfont图标项目里要进行批量去色处理
iconfontUrl: '//at.alicdn.com/t/font_1058494_nw4mdj6da9e.js'
};
在组件中使用
引入
import IconFont from '@/components/IconFont';
使用
<IconFont type="icon-ctl-term" />;
import React from 'react';
import { connect } from 'dva';
import { Icon, Row } from 'antd';
import IconFont from '@/components/IconFont';
function IndexPage() {
return (
<div style={{ fontSize: 30 }}>
<Row type="flex" align="middle" justify="center">
<span>默认字体:</span>
<Icon type="apple" />
<Icon type="windows" />
<Icon type="android" />
</Row>
<Row type="flex" align="middle" justify="center">
<span>自定义字体:</span>
<IconFont type="icon-ctl-term" />;
</Row>
</div>
);
}
IndexPage.propTypes = {
};
export default connect()(IndexPage);
效果
2、离线使用自定义字体
正确应该是这么引用本地文件
iconfontUrl: require('../public/fonts/iconfonts/iconfont.js')
- 先按前面那位博主介绍的将字体下载到本地
- 然后在defaultSettings.js这个配置文件中更改iconfontUrl值为你存放在项目中的相对路径
- 这里值得注意的是defaultSettings.js文件在src目录下所有引用本地文件需要import或require否则就无需,浏览器控制台还会报错
框架中左侧菜单栏具体使用图标代码