關於阿里圖標庫Iconfont生成圖標的三種使用方式（fontclass/unicode/symbol）

時間 2019-11-09

標籤關於阿里圖標 iconfont 生成三種使用方式 fontclass unicode symbol 欄目阿里巴巴简体版

原文原文鏈接

1.附阿里圖標庫連接：http://www.iconfont.cn/javascript

2.登陸阿里圖標庫之後，搜索咱們須要的圖標，將其加入購物車，如圖

3.將咱們須要的圖標所有挑選完畢之後，點擊購物車圖標

4.這時候右側會出現一個預覽窗口，顯示咱們前面加入購物車的那些圖標，咱們選擇頁面中的下載代碼css

5.查看一下咱們的下載包裏面都有什麼文件
html

6.使用fontclass方式
其實在下載的文件裏面demo_fontclass裏面說的已經很詳細了，咱們在此基礎上，再說明一下。java

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

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

6.2使用步驟以下：chrome

第一步：引入項目下面生成的fontclass代碼：瀏覽器

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

第二步：挑選相應圖標並獲取類名，應用於頁面：svg

<i class="iconfont icon-xxx"></i>

6.3使用fontclass性能

6.3.1將生成目錄下面的iconfont.css複製一份放到咱們的項目下面，咱們能夠看一下里面的代碼字體

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1491962079836'); /* IE9*/
  src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1491962079836#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-fanhuidingbu:before { content: "\e60f"; }

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

這個文件能夠單獨的放置能夠直接放到咱們本身的css文件裏面。看代碼，他還須要四個依賴文件，咱們也複製過來。

6.3.2html文件中使用咱們的圖標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="iconfont.css">
    <title></title>
</head>
<body>
    <div><i class="iconfont icon-xinfeng"></i>哈哈哈</div>
</body>
</html>

注意標籤i元素的class類，具體的圖標對應過去的類，能夠在下載包裏面的demo_fontclass裏面找到。

7.使用unicode

注意查看下載目錄裏面的demo_unicode.html

7.1引用

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

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

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

7.2unicode使用步驟以下：

第一步：拷貝項目下面生成的font-face

@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'); }

第二步：定義使用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; }

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

<i class="iconfont">&#x33;</i>

7.3實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css" media="screen">
        @font-face {font-family: "iconfont";
          src: url('iconfont.eot?t=1491962079836'); /* IE9*/
          src: url('iconfont.eot?t=1491962079836#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('iconfont.woff?t=1491962079836') format('woff'), /* chrome, firefox */
          url('iconfont.ttf?t=1491962079836') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('iconfont.svg?t=1491962079836#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;
        }
    </style>
    <title></title>
</head>
<body>
    <div><i class="iconfont">&#xe600;</i>哈哈哈</div>
</body>
</html>

圖標對應的Unicode編碼，在demo_unicode.html文件裏面查看。

8.symbol方法

詳細在demo_symbol.html文件裏面
8.1引用

這是一種全新的使用方式，應該說這纔是將來的主流，也是平臺目前推薦的用法。相關介紹能夠百度，這種用法實際上是作了一個svg的集合，與另外兩種相比具備以下特色：

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

使用步驟以下：

第一步：引入項目下面生成的symbol代碼：

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

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

<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

第三步：挑選相應圖標並獲取類名，應用於頁面：

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

8.3實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="iconfont.js"></script>
    <style type="text/css">
        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
    </style>
    <title></title>
</head>
<body>
    <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xinfeng"></use>
        </svg>  
        哈哈哈哈    
    </div>
</body>
</body>
</html>