iconfont的使用方法(更新了一些內容)

字體圖標iconfont
阿里官網傳送門: http://www.iconfont.cn/
打開首頁的小圖標好漂亮哦
1)clipboard.pngjavascript

2)clipboard.pngcss

3)clipboard.png
選擇本身想要下載的格式點擊下載,下載素材和下載代碼的意思是不同的,這裏先演示下載素材。html

下載素材

**下載素材:下載圖標資源,能夠指定顏色、大小以及格式
下載代碼:下載字體圖標的代碼(即便官網上的圖標是彩色的,應用到項目中也是黑白且大小不變的小圖標,等一下演示。),包括demo的html和css文件、iconfont的css、js以及各類字體文件。 添加至項目:創建一個本身的圖標庫,將圖標整合在一塊兒,方便後續應用在本身的實際項目中。**java

clipboard.png

4)加在代碼中看一下效果
clipboard.pngweb

clipboard.png

clipboard.png

下面演示下載代碼

1)隨便選擇幾個小圖標,添加到購物車。chrome

clipboard.png

2)下載代碼瀏覽器

clipboard.png

clipboard.png

3)將壓縮包解壓,將iconfont.css添加到本身的項目中,而且在項目中引用這個css文件。svg

clipboard.png

clipboard.png

4)打開壓縮包中的demo_fontclass.html文件,會看見圖標的名字。性能

clipboard.png

5)代碼加一下樣式
clipboard.png字體

clipboard.png

6)運行效果

clipboard.png
顯示圖標是黑白的,如今將圖標放大點。

clipboard.png

clipboard.png

能夠知道,這種方式獲得的圖標的內容大小是不變的。
想要將圖表內容變大,能夠在iconfont.css文件中改動。將16px改爲50px。

clipboard.png

clipboard.png

clipboard.png

下面演示將圖標添加至項目

1)將選擇的圖標添加至項目,若是已經添加過項目了,直接點擊就行了,以前沒添加過項目,給你的項目起一個名字。
clipboard.png

右上角的「下載至本地」就是下載該圖標庫的代碼到本地,代碼包括demo的html和css文件、iconfont的css、js以及各類字體文件,demo是使用說明,iconfont文件是使用這個圖標庫所必須的文件,可根據使用的具體方式引用相應文件(就是剛纔說的下載代碼那種方式,不逼逼了)。

clipboard.png

左上角的三種方式
Unicode、Fontclass、Symbol:三種使用的方式,在下載到本地的代碼中找到demo,demo的html文件中有這三種方式的詳細使用說明(我就直接將內容粘貼過來了 小聲逼逼o3o)。
注意:若是在圖標庫中新增長了圖標,則須要更新在線連接並把該連接從新引入到實際項目中,或者從新下載代碼到本地,而後在實際項目中引入最新的iconfont文件。

1)unicode

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

兼容性最好,支持ie6+,及全部現代瀏覽器。
支持按字體的方式去動態調整圖標大小,顏色等等。
可是由於是字體,因此不支持多色。只能使用平臺裏單色的圖標,就算項目裏有多色圖標也會自動去色。
注意:新版iconfont支持多色圖標,這些多色圖標在unicode模式下將不能使用,若是有需求建議使用symbol的引用方式

unicode使用步驟以下:
第一步:拷貝項目下面生成的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');
}

**font-family: <YourWebFontName> :自定義字庫名稱(通常設置爲所引入的字庫名),後續樣式規則中則經過該名稱來引用該字庫。
src :設置字體的加載路徑和格式,經過逗號分隔多個加載路徑和格式
srouce :字體的加載路徑,能夠是絕對或相對URL。
format :字體的格式,主要用於瀏覽器識別,通常有如下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和以前使用的是一致的。
src屬性後還有一個 local(font name) 字段,表示從用戶系統中加載字體,失敗後才加載webfont。**
第二步:定義使用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>

"iconfont"是你項目下的font-family。能夠經過編輯項目查看,默認是"iconfont"。

2)font-class
font-class是unicode使用方式的一種變種,主要是解決unicode書寫不直觀,語意不明確的問題。

與unicode使用方式相比,具備以下特色:

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

第一步:引入項目下面生成的fontclass代碼:

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

第二步:挑選相應圖標並獲取類名,應用於頁面:

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

"iconfont"是你項目下的font-family。能夠經過編輯項目查看,默認是"iconfont"。
Unicode方式和FontClass方式是極其類似的,只不過他們一個用的是圖標的字體編碼,一個用的是圖標的unicode引用而已
icon-xxx是使用了unicode引用的類名,可在下載的demo.html中查看,或者能夠在阿里矢量圖標庫的網站上,進入個人項目查看。xxx是圖標的名字,你能夠在網站上修改圖標的名字(FontClass和Symbol均可以),可是切記若是你使用了在線連接,則必須在網站上更新在線連接,而後將該連接更新到你的項目中,若是你是本地使用,則必須下載最新的代碼,而後更新到你的項目中,不然修改無效

能夠更改圖標名字,改能夠改圖標的樣式。

clipboard.png

clipboard.png

clipboard.png

3)symbol方式(有顏色了)

這是一種全新的使用方式,應該說這纔是將來的主流,也是平臺目前推薦的用法。相關介紹能夠參考這篇文章 這種用法實際上是作了一個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>

綜合運用(本地)

<!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-fengbiping:before { content: "\e60d"; }
        
     .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="js/iconfont.js"></script>
</head>
<body>
       <div>
            <div><i class="iconfont">&#xe60d;</i>Unicode</div>
            <div><i class="iconfont icon-fengbiping"></i>FontClass</div>
            <div style="font-size: 3em;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fengbiping"></use>
                </svg>
                Symbol
            </div>
        </div>
</body>
</html>

clipboard.png

綜合運用(在線連接)

<!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_824663_2xmiq46djp7.css"><!-- fontclass -->
    <style type="text/css">
       @font-face {
  font-family: 'iconfont';  /* project id 824663 */
  src: url('//at.alicdn.com/t/font_824663_2xmiq46djp7.eot');
  src: url('//at.alicdn.com/t/font_824663_2xmiq46djp7.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_824663_2xmiq46djp7.woff') format('woff'),
  url('//at.alicdn.com/t/font_824663_2xmiq46djp7.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_824663_2xmiq46djp7.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_824663_2xmiq46djp7.js"></script><!-- Symbol -->
</head>
<body>
    <div>
            <div><i class="iconfont">&#xe60d;</i>Unicode</div>
            <div><i class="iconfont icon-fengbiping"></i>FontClass</div>
            <div style="font-size: 3em;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fengbiping"></use>
                </svg>
                Symbol
            </div>
        </div>
</body>
</html>

clipboard.png

相關文章
相關標籤/搜索