第一步,你把你的項目的SVG文件跟你自己做的圖標的SVG文件都上到icomoon.io/app(上傳方式上節已經講過了,不會的翻下上節內容),會看到這么界面
第二步,點擊下載后,出現這個頁面,修改前綴,文件的名稱
第三步,修改每個圖標的名稱,size值然后點擊下載
我做的是安卓的APP所以修改的名字也是按照我自己的來的,你們也按照你們自己的來
第四步,下載下來的文件名字為icomoon壓縮包,解壓后應該是這樣
第五步重點來了,要注意呀,在你的項目里面找到fonts,把你下載下來的fonts文件覆蓋到這個里面記得名字要一致
第六步打開您icomoon文件的style.css
第七步,看到這么個界面
第八步,在你的項目里面找到ionic.css文件
第九步,打開
第十步,修改eot文件名稱,如果名稱一致就不用修改了;切記把我紅框里面的SRC得修改了;
第十一步,把你生成的圖標樣式替換了原有的,有人問什么是圖標的樣式,看下面的圖就知道了
第十一步,保存下就可以看到你自己的圖標了,再往下,我不知道這些是干嘛用的,但是介於跟圖標有關系,所以我們就接着換,跟我一起來,找到_ionicons-font.scss,
第十二步打開修改吧,相信您一定比我聰明
第十三步,找到這個_ionicons-icons.scss
第十四步,繼續修改,發現什么規律了嗎?這個就是咱們的圖標命名,趕緊改吧
第十五步找到_ionicons-variables.scss
第十六步,就這么任性,繼續修改,兩個地方要修改,一個是前綴,如果跟第二步中寫的前綴一樣就不用修改了,另個修改的地方有點坑爹,$ionicon-var-Android-car: "\e602";對照咱們下載的style里面的發現規律了吧,它這個是$ionicon-var-圖標名字:圖標樣式;咱們的style是.前綴-圖標名字{樣式},好了趕緊改吧
東西寫的有點趕腳,有不懂的地方或是不對的地方大家可以告訴我
可以參照這個文檔來進行修改 http://download.csdn.NET/detail/findsafety/9127337
需要用到的文件有3個
1 fonts文件夾下面的所有文件
2 style.css
3 demo-files文件夾下面的demo.css
只有上面幾個都完整的時候,才能正常使用到SVG圖標
另外一點,自己制作的SVG圖標可能會出現在https://icomoon.io/app/#/select上傳完成的時候發現是一片空白,原因在於SVG圖片制作不符合要求,詳情見http://www.zhihu.com/question/24513579