Ionic2入門教程（十二）使用阿里巴巴矢量圖標庫Iconfont

使用阿里巴巴矢量圖標庫Iconfont

系列教程看這裏
Ionic2入門教程（一）安裝和環境配置
Ionic2入門教程（二）進階配置：Android打包
ionic2入門教程（三）高仿網易公開課（1）
ionic2入門教程（四）解讀目錄結構
ionic2入門教程（五）如何使用IonicPage
ionic2入門教程（六）地圖服務（谷歌、高德、百度定位）
ionic2入門教程（七）來一個五星評分
ionic2入門教程（八）高仿網易公開課（2）
ionic2入門教程（九）樣式修改和主題切換
Ionic2入門教程（十）如何debug一個Ionic應用
Ionic2入門教程（十一）製做一個視頻背景歡迎頁

Ionic本身的圖標庫：http://ionicframework.com/doc...
也不少了，可是有時候仍是不夠用，或者說不夠適合，那麼咱們能夠用阿里的矢量圖標庫，來使圖標的使用更加靈活，同時也能很方便的使用彩色圖標，爲app添加一抹亮色~有些圖標真的很可愛啊~

0、效果圖

一、註冊帳號

官網：http://www.iconfont.cn

二、選擇適合的圖標加入項目

先選幾個加到購物車~

由於圖標是按項目分組的，生成的連接和下載生成的css或js都是按你這個項目決定的，全部圖標在一個項目的話，就在一個文件裏，是方便咱們後期使用~

不過一開始就隨便建個項目好了~

三、查看在線連接、點擊生成

分爲Unicode、Font class 、Symbol三種類型，其中前兩種是純色，後一種是彩色~

四、在線

1.Unicode

第一步：拷貝項目下面生成的font-face、在css中添加

@font-face {
  font-family: 'iconfont';  /* project id 462633 */
  src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot');
  src: url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.svg#iconfont') format('svg');
}

第二步：定義使用iconfont的樣式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

第三步：挑選相應圖標並獲取字體編碼，應用於頁面

<ion-icon class="iconfont" color="secondary">&#xea0a;;</ion-icon>

####2.Font class
第一步：拷貝項目下面生成的fontclass代碼，在index中link
http和https均可以~

<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css">

第二步：挑選相應圖標並獲取類名，點擊圖標，複製代碼，應用於頁面：
<ion-icon class="iconfont icon-Apple" color="secondary"></ion-icon>

3.Symbol

這是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。這種用法實際上是作了一個svg的集合。
特色以下：

• 支持多色圖標了，再也不受單色限制。
• 經過一些技巧，支持像字體那樣，經過font-size,color來調整樣式。
• 兼容性較差，支持 ie9+,及現代瀏覽器。
• 瀏覽器渲染svg的性能通常，還不如png。

第一步：拷貝項目下面生成的symbol代碼，在index.html里加入：

<script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>

第二步：在SCSS加入通用css代碼（引入一次就行）：

.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

第三步：挑選相應圖標並獲取類名，應用於頁面：
<svg class="icon" aria-hidden="true">

<use xlink:href="#icon-Android"></use>

</svg>

五、離線、點擊下載至本地

文件夾內容以下，點擊每一個demo的html會告訴你用法，其實和上面徹底同樣：

咱們須要的是iconfont.css和iconfont.js

將這兩個文件複製到項目內、在index.html內引入

<link rel="stylesheet" href="./assets/icon/iconfont.css">
  <script src="./assets/icon/iconfont.js"></script>

註釋掉以前的便可

<link rel="stylesheet" href="https://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.css">
  <script src="http://at.alicdn.com/t/font_462633_ry5cpyoqrbnbfbt9.js"></script>

六、源碼

https://github.com/JiaXinYi/I...

若是對你有幫助的話歡迎star和fork噢~