背景
ant-design 官網(wǎng)提供了一部分圖標雪猪,但種類并不能滿足實際開發(fā)由缆,需要去阿里圖標庫挑選些的圖標來使用曾雕。
問題
Antd 表單
使用過 Antd 的應該知道上面反饋成功的圖標顯示有誤踏施,應該是一個藍色的√叮叹。
思路
起初以為是 antd 的樣式?jīng)]有引進來问畅,可是想想又不對实檀,反饋失敗圖標 —— 紅色×是可以顯示正常的,后來點了下整個網(wǎng)站發(fā)現(xiàn)只有反饋成功圖標顯示有問題按声,F(xiàn)12 打開控制臺查源碼如下:
反饋成功圖標
可以看到膳犹,這里用到一個偽類選擇器。內(nèi)容為:'\E630'签则。
在此之前须床,我剛好去阿里圖標庫 Iconfont 自己挑選了一批圖標,下載到本地渐裂,也就是這幾個文件:
iconfont 圖標
打開 iconfont.css 文件豺旬,發(fā)現(xiàn)果然與其中一個圖標的 unicode 沖突了。而沖突的那個圖標的樣子就是最上面那張圖的圖形柒凉。
iconfont.css
...
.anticon-stop:before { content: "\E630"; }
...
解決
直接刪除本地 iconfont.css 文件中沖突的那個圖標是沒用的族阅,需要重新去阿里圖標庫,刪除沖突的那個圖標膝捞,重新下載坦刀。