如何在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>

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