Ant Design Pro 使用自定義iconfont圖標,改變導航欄的圖標

Ant Design Pro 使用iconfont上的圖標有兩種方法:

1、加載在線圖標
  • 創建一個項目(圖標的前綴一定要設置爲:icon-
    在這裏插入圖片描述
  • 創建遠程連接
    在這裏插入圖片描述
  • 複製代碼,找到ant design pro項目中的src下的defaultSettings.js,設置iconfontUrl的路徑
    在這裏插入圖片描述
  • 在路由配置上使用使用就可以了
    在這裏插入圖片描述
2、加載離線圖標
  • 加載離線的圖標,需要把iconfont上編輯好的圖標下載,並且把文件放在項目適合的文件夾下。小編放在src/assets
    在這裏插入圖片描述
  • 找到ant design pro項目中的src下的defaultSettings.js,設置iconfontUrl的路徑,這是就需要使用require導入文件,直接配置路徑,會無效的。
    在這裏插入圖片描述
  • 最後像在線加載那樣使用。