Android iconfont字體圖標的使用

1、首先，進入阿里的矢量圖標庫，在這個圖標庫裏面能夠找到不少圖片資源，固然了須要登陸才能下載或者使用，用GitHub帳號或者新浪微博帳號登陸均可以

　　2、登陸之後，能夠搜索本身須要的資源，而後直接下載使用，或者創建圖標庫而後再使用，例如這裏以刪除的圖標爲例

　　a) 搜索刪除圖標

　　

　　b) 選擇須要的圖標，而後能夠執行三種操做：添加入庫、收藏或者直接下載，能夠根據本身的實際狀況來選擇相應操做，這裏選擇添加入庫，操做完能夠看到圖標已經添加進右上角的購物車裏了

　　

　　c) 點擊右上角的購物車，能夠看到以下頁面，這裏也是根據本身的具體狀況來進行操做

　　一鍵清除：能夠清掉全部圖標

　　下載素材：下載圖標資源，能夠指定顏色、大小以及格式

　　下載代碼：下載字體圖標的代碼，包括demo的html和css文件、iconfont的css、js以及各類字體文件

　　添加至項目：創建一個本身的圖標庫，將圖標整合在一塊兒，方便後續應用在本身的實際項目中

　　

　　d) 這裏選擇添加至項目，一開始沒有項目，須要點擊+號的圖標建立一個新項目，而後把新圖標加入到新項目中。若是已經有了項目，則選擇項目並點擊肯定便可。這裏的項目其實就是上面所說的圖標庫了

　　

　　e) 進入到個人項目（圖標庫）中，能夠看到以下頁面

 

　　下載至本地：下載該圖標庫的代碼到本地，代碼包括demo的html和css文件、iconfont的css、js以及各類字體文件，demo是使用說明，iconfont文件是使用這個圖標庫所必須的文件，可根據使用的具體方式引用相應文件

　　Unicode、Fontclass以及Symbol：三種使用的方式，在下載到本地的代碼中找到demo，demo的html文件中有這三種方式的詳細使用說明

　　點擊查看在線連接：在頁面上能夠看到一串字符串.css，這個就是這個圖標庫的在線連接，在實際項目中引入該連接便可使用而無需下載到本地（這個是FontClass的，Unicode跟Symbol的有屬於本身的在線連接）

　　須要注意的是，若是在圖標庫中新增長了圖標，則須要更新在線連接並把該連接從新引入到實際項目中，或者從新下載代碼到本地，而後在實際項目中引入最新的iconfont文件

　　2、使用介紹

　　如下的使用方式都是來自下載下來的demo代碼，把這些都整合在一塊兒，方便比較和查閱。至於使用在線連接的方式，由於比較簡單，這裏就不作介紹，能夠看下面的實戰

　　1、Unicode方式

　　Unicode是字體在網頁端最原始的應用方式，特色是：

• 兼容性最好，支持ie6+，及全部現代瀏覽器
• 支持按字體的方式去動態調整圖標大小，顏色等等
• 不支持多色。只能使用平臺裏單色的圖標，就算項目裏有多色圖標也會自動去色

　　注意：新版iconfont支持多色圖標，這些多色圖標在Unicode模式下將不能使用，若是有需求建議使用Symbol的引用方式

　　使用步驟以下：

　　a) 拷貝項目下面生成的font-face，若是想要深刻了解font-face屬性，能夠點擊這裏還有here

　　@font-face {
 　　 font-family: 'iconfont';
  　　src: url('iconfont.eot');
  　　src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 　　 　　　url('iconfont.woff') format('woff'),
  　　　　　url('iconfont.ttf') format('truetype'),
　　 　　　 url('iconfont.svg#iconfont') format('svg');
　　}

　　b) 定義使用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;
　　}

　　c) 挑選相應圖標並獲取字體編碼，應用於頁面

　　<i class="iconfont">&#x33;</i> <!--"iconfont"是你項目下的font-family，默認是"iconfont"-->

　　3是字體編碼，可在下載的demo.html中查看，或者能夠在阿里矢量圖標庫的網站上，進入個人項目查看

　　2、FontClass方式

　　FontClass是Unicode使用方式的一種變種，主要是解決Unicode書寫不直觀，語意不明確的問題。與Unicode使用方式相比，具備以下特色：

• 兼容性良好，支持ie8+，及全部現代瀏覽器
• 相比於Unicode語意明確，書寫更直觀。能夠很容易分辨這個icon是什麼
• 由於使用class來定義圖標，因此當要替換圖標時，只須要修改class裏面的unicode引用便可
• 由於本質上仍是使用的字體，因此多色圖標仍是不支持

　　使用步驟以下：

　　a) 引入項目下面生成的fontclass代碼

　　<link rel="stylesheet" type="text/css" href="./iconfont.css">

　　iconfont.css代碼裏包含了@font-face、.iconfont以及圖標的unicode引用，其實對比下能夠發現Unicode方式和FontClass方式是極其類似的，只不過他們一個用的是圖標的字體編碼，一個用的是圖標的unicode引用而已

　　@font-face {font-family: "iconfont";
  　　src: url('iconfont.eot?t=1495209181038'); /* IE9*/
  　　src: url('iconfont.eot?t=1495209181038#iefix') format('embedded-opentype'), /* IE6-IE8 */
  　　url('iconfont.woff?t=1495209181038') format('woff'), /* chrome, firefox */
  　　url('iconfont.ttf?t=1495209181038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  　　url('iconfont.svg?t=1495209181038#iconfont') format('svg'); /* iOS 4.1- */
　　}

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

　　.icon-enter:before { content: "\e601"; }

　　.icon-setUp:before { content: "\e600"; }

　　b) 挑選相應圖標並獲取類名，應用於頁面

　　<i class="iconfont icon-xxx"></i> <!--"iconfont"是你項目下的font-family，默認是"iconfont"-->

　　icon-xxx是使用了unicode引用的類名，可在下載的demo.html中查看，或者能夠在阿里矢量圖標庫的網站上，進入個人項目查看。xxx是圖標的名字，你能夠在網站上修改圖標的名字（FontClass和Symbol均可以），可是切記若是你使用了在線連接，則必須在網站上更新在線連接，而後將該連接更新到你的項目中，若是你是本地使用，則必須下載最新的代碼，而後更新到你的項目中，不然修改無效

　　三、Symbol方式

　　這是一種全新的使用方式，應該說這纔是將來的主流，也是阿里矢量圖標庫平臺目前推薦的用法，可是在前端，新技術要向老設備看齊，因此你懂得。 這種用法實際上是作了一個svg的集合，與另外兩種相比具備以下特色：

• 支持多色圖標了，再也不受單色限制
• 經過一些技巧，支持像字體那樣，經過font-size,color來調整樣式（對於前兩種也是一樣適用的，fontsize改變大小，color改變顏色）
• 兼容性較差，支持 ie9+，及現代瀏覽器
• 瀏覽器渲染svg的性能通常，還不如png

　　使用步驟以下：

　　a) 引入項目下面生成的Symbol代碼

　　<script src="./iconfont.js"></script>

　　b) 加入通用css代碼（引入一次就行）

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

　　c) 挑選相應圖標並獲取類名，應用於頁面

　　<svg class="icon" aria-hidden="true">
  　　<use xlink:href="#icon-xxx"></use>
　　</svg>

　　3、實戰

　　1、本地使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont</title>
    <style type="text/css">
        @font-face { /* 實際使用中是各用各的，這裏不想寫那麼多例子，因此就共用了一個，並不推薦這樣 */
            font-family: "iconfont";
            src: url('css/iconfont/iconfont.eot?t=1495209181038'); /* IE9*/
            src: url('css/iconfont/iconfont.eot?t=1495209181038#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('css/iconfont/iconfont.woff?t=1495209181038') format('woff'), /* chrome, firefox */
            url('css/iconfont/iconfont.ttf?t=1495209181038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('css/iconfont/iconfont.svg?t=1495209181038#iconfont') format('svg'); /* iOS 4.1- */
        }
        .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;
        }
        .icon-sendMsg:before { content: "\e60c"; }
        
　　　　 .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="css/iconfont/iconfont.js"></script>
</head>
<body>
    <div style="width: 100%;text-align: center;">
        <p><i class="iconfont">&#xe60c;</i>Unicode</p>
        <p><i class="iconfont icon-sendMsg"></i>FontClass</p>
        <p style="font-size: 3em;">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sendMsg"></use>
            </svg>
            Symbol
        </p>
    </div>
</body>
</html>

　　運行代碼能夠看到字體圖標已經出來了

　　二、在線連接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iconfont</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.css"><!-- fontclass -->
    <style type="text/css">
        @font-face { /* Unicode */
            font-family: 'iconfont';  /* project id 293930 */
            src: url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.eot');
            src: url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.eot?#iefix') format('embedded-opentype'),
            url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.woff') format('woff'),
            url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.ttf') format('truetype'),
            url('http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.svg#iconfont') format('svg');
        }
        .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;
        }
        .icon-sendMsg:before { content: "\e60c"; }

        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        p{
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="http://at.alicdn.com/t/font_kpdcqplvwqwr8uxr.js"></script><!-- Symbol -->
</head>
<body>
    <div style="width: 100%;text-align: center;background: #000;padding: 20px 0;">
        <p><i class="iconfont">&#xe60c;</i>Unicode</p>
        <p><i class="iconfont icon-sendMsg"></i>FontClass</p>
        <p style="font-size: 3em;">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sendMsg"></use>
            </svg>
            Symbol
        </p>
    </div>
</body>
</html>

　　運行代碼能夠看到字體圖標已經出來了