1. 程式人生 > >ant design離線Icon圖示不顯示問題

ant design離線Icon圖示不顯示問題

前提概要:

    公司使用react-create-app+antDesign開發前端,在部署到內網中時發現icon圖示無法顯示。

    效果如下:

   

解決方法:

方法一:

  1. 官網下載inconfont包或者通過命令npm install antd-iconfont安裝iconfont包(安裝成功後文件在專案的node_modules/antd-iconfont)
  2. 拷貝antd-iconfont到已打包的static目錄下(通過npm run build打包),可根據情況修改antd-iconfont資料夾名稱(途中我修改的是iconfont)

  3. 進入static/css檔案中,開啟css檔案搜尋https,
  4. 替換css中所有涉及到https://at.alicdn.com...的url,替換為拷貝後的iconfont的相對路徑
    注意:替換中原url中涉及到的.eot、.woff字尾需要保留,替換為../iconfont/iconfont.eot、../iconfont/iconfont.woff等

方法二:

     可百度其他解決方案等