一、改造原因

因旧版项目由ANGULAR+IONIC构建，根据要求需要进行整体UIUE的改造，导航栏图标需要变更为新版图标

旧版图标

新版图标

二、改造过程

1、查询前端代码后发现以上图标采用ionic自带的ICON的方式，并不是图片方式

<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>

2、查询ionic官方图标库并未查询新版设计所采用的图标https://ionicons.com/

3、在ant Design的设计网站中找到了相关图标https://ant.design/components/icon-cn/

4、但ant Design图标无法直接放在项目中使用，官方只有这一种方式

5、继续探索IONIC的图标使用方式，找到方式为在html中引用css样式，CSS中引用以下4个字体文件，实现图标的引用和展示

6、获取以上信息后，将解决问题的重点转移到如何找到ant Desgin的4个字体文件已经CSS样式代码

7、搜索众多后终于在github的ant Desgin官方项目中找到所有图标的svg格式

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

8、放入系统中后发现并不能生效，因为需要多种格式字体文件才能满足大多数浏览器

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

9、我们找到该网站可以创建一个项目，然后将之前下载的图标全部上传后，可以整体下载

https://www.iconfont.cn/

10、下载后得到4份字体文件和一个CSS文件

11、将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";

12、在页面上使用新的图标标签即可展示新的图标

<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>

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