如何在IONIC項目中使用其餘圖標（例如ant Design）

1、改造緣由css

因舊版項目由ANGULAR+IONIC構建，根據要求須要進行總體UIUE的改造，導航欄圖標須要變動爲新版圖標html

舊版圖標前端

新版圖標ios

2、改造過程git

一、查詢前端代碼後發現以上圖標採用ionic自帶的ICON的方式，並非圖片方式github

<ion-tabs id="ion-tabs" class="tabs-icon-top tabs-stable tabs-color-active-energized">
    <!-- Dashboard Tab -->
    <ion-tab title="首頁" icon-off="ion-home" icon-on="ion-home" ng-click="ss('tab.tab1')">
        <ion-nav-view animation="slide-left-right-ios7" name="tab-tab1"></ion-nav-view>
    </ion-tab>
    <!-- Chats Tab -->
    <ion-tab title="提問" icon-off="ion-help-circled" icon-on="ion-help-circled" ng-click="ss('tab.tab2')">
        <ion-nav-view animation="slide-left-right-ios7" name="tab-tab2"></ion-nav-view>
    </ion-tab>
    <!-- Account Tab -->
    <ion-tab title="回答" icon-off="ion-clipboard" icon-on="ion-clipboard" ng-click="ss('tab.tab3')">
        <ion-nav-view animation="slide-left-right" name="tab-tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab title="個人" icon-off="ion-person" icon-on="ion-person" ng-click="ss('tab.tab4')">
        <ion-nav-view animation="slide-left-right" name="tab-tab4"></ion-nav-view>
    </ion-tab>
</ion-tabs>

二、查詢ionic官方圖標庫並未查詢新版設計所採用的圖標https://ionicons.com/web

三、在ant Design的設計網站中找到了相關圖標https://ant.design/components/icon-cn/瀏覽器

四、但ant Design圖標沒法直接放在項目中使用，官方只有這一種方式ionic

五、繼續探索IONIC的圖標使用方式，找到方式爲在html中引用css樣式，CSS中引用如下4個字體文件，實現圖標的引用和展現ide

六、獲取以上信息後，將解決問題的重點轉移到如何找到ant Desgin的4個字體文件已經CSS樣式代碼

七、搜索衆多後終於在github的ant Desgin官方項目中找到全部圖標的svg格式

https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-svg/svg/outlined

八、放入系統中後發現並不能生效，由於須要多種格式字體文件才能知足大多數瀏覽器

https://zhuanlan.zhihu.com/p/28179203

九、咱們找到該網站能夠建立一個項目，而後將以前下載的圖標所有上傳後，能夠總體下載

https://www.iconfont.cn/

十、下載後獲得4份字體文件和一個CSS文件

十一、將4份字體文件放入項目fonts文件夾內，將CSS中使用到的圖標放入到ionic.css中

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.eot?v=2.0.1");
  src: url("../fonts/iconfont.eot?v=2.0.1#iefix") format("embedded-opentype"), url("../fonts/iconfont.ttf?v=2.0.1") format("truetype"), url("../fonts/iconfont.woff?v=2.0.1") format("woff"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.svg?v=2.0.1#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal; }


.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icondelete-column:before {
  content: "\e66f";

十二、在頁面上使用新的圖標標籤便可展現新的圖標

<ion-tabs id="ion-tabs" class="tabs-icon-top tabs-stable tabs-color-active-energized">

    <!-- Dashboard Tab -->
    <ion-tab title="首頁" icon-off="iconfont iconbank" icon-on="iconfont iconbank" ng-click="ss('tab.tab1')">
        <ion-nav-view animation="slide-left-right-ios7" name="tab-tab1"></ion-nav-view>
    </ion-tab>

    <!-- Chats Tab -->
    <ion-tab title="提問" icon-off="iconfont iconedit" icon-on="iconfont iconedit" ng-click="ss('tab.tab2')">
        <ion-nav-view animation="slide-left-right-ios7" name="tab-tab2"></ion-nav-view>
    </ion-tab>

    <!-- Account Tab -->
    <ion-tab title="回答" icon-off="iconfont iconeye" icon-on="iconfont iconeye" ng-click="ss('tab.tab3')">
        <ion-nav-view animation="slide-left-right" name="tab-tab3"></ion-nav-view>
    </ion-tab>
    <ion-tab title="個人" icon-off="iconfont iconteam" icon-on="iconfont iconteam" ng-click="ss('tab.tab4')">
        <ion-nav-view animation="slide-left-right" name="tab-tab4"></ion-nav-view>
    </ion-tab>


</ion-tabs>

以上就是本次分享內容，請各位看官指正