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

時間  2019-11-08
標籤 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程