ionic2实战-使用阿里巴巴矢量图标库Iconfont

2017.02.18 18:38* 字数 633

为何使用阿里巴巴矢量图标库Iconfont

• Iconfont提供了近百万数量的图标,而且有多种使用方式
• 咱们要使用字体图标,相对图片占用小,更清晰,大小颜色更易控制
• ionic官方提供的图标不够用,没有具体业务方面合适的图标

如何使用Iconfont

1. 登陆Iconfont官网

   • 官网提供了github和新浪微博两种登陆方式,若是直接用微博登陆不上去,那先登陆新浪微博,再去Iconfont用微博登陆
   • 本文是Iconfont web端的详细使用教程,其余使用方式,建议阅读官方帮助文档

2. 搜索图标并加入购物车

   搜索图标并加入购物车

3. 点击右上角购物车图标,在打开的窗口中,点击"添加至项目",没有项目则会提示建立项目

   将图标添加至项目

   建立项目

一.在app中使用自定义字体图标-Iconfont官方方式

1. 效果图

   在app内容区域中使用自定义图标

2. 在图标管理-个人项目中编辑图标,并生成图标连接

   Paste_Image.png

3. 复制生成的连接并添加到appsrc/index.html文件中.注意:给连接加上http:或https:不然在真机上显示不出来.固然也能够把资源下载到本地进行引用iconfont.css

   复制生成的css连接

   在index.html添加css连接

4. 效果图完整代码以下

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
  <style>
    .my-icon>i{
      font-size: 32px;
      height: 36px;
      margin:10px;
    }
  </style>
</ion-header>

<ion-content>
  <div class="my-icon">
    <i class="iconfont icon-patorl-task" color="primary"></i>
    <i class="iconfont icon-patorl-record" color="primary"></i>
    <i class="iconfont icon-repair-task" color="energized"></i>
    <i class="iconfont icon-repair-record" color="energized"></i>
    <i class="iconfont icon-experiment-task" color="secondary"></i>
    <i class="iconfont icon-experiment-record" color="secondary"></i>
    <i class="iconfont icon-guard-task" color="danger"></i>
    <i class="iconfont icon-guard-record" color="danger"></i>
  </div>
  <ion-list>
    <ion-item>
      试验记录
      <ion-icon class="iconfont icon-experiment-record" color="secondary" item-right></ion-icon>
    </ion-item>
    <ion-item>
      巡检记录
      <ion-icon class="iconfont icon-patorl-record" color="primary" item-right></ion-icon>
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont icon-patorl-task" color="primary" item-left></ion-icon>
      巡检任务
    </ion-item>
    <ion-item>
      <ion-icon class="iconfont icon-experiment-task" color="secondary" item-left></ion-icon>
      试验任务
    </ion-item>
  </ion-list>
</ion-content>

二.在tab中使用自定义字体图标-ionic方式

1. 效果图

2. 挑选图标并下载到本地

3. 复制字体文件到项目中

4. 新建一个tab.scss文件,并复制下载的iconfont.css文件的内容到其中

5. 修改后的tab.scss

6. 在tab中使用

7. 其实在任何地方均可以用zhifubao和qq,也能够不用新建tab.scss,直接把自定义的css写在src/theme/variables.scss文件中,由于全部的.scss最终编译的css都放在了www/build/main.css文件中

三.在tab中使用自定义图标-图片方式

1. 效果图

   在tab中使用自定义图标

2. 看图看代码

3. 上图代码

   .ion-ios-my-test:before {
   content: url("../assets/icon/test.png");
   }
   .ion-ios-my-test-outline:before {
   content: url("../assets/icon/test-outline.png");
   }
   .tab-button[aria-selected=true] .ion-md-my-test:before {
   content: url("../assets/icon/test.png");
   }
   .tab-button[aria-selected=false] .ion-md-my-test:before {
   content: url("../assets/icon/test-outline.png");
   }

最后

不少人都犯得错误