CSS 小結筆記之圖示字型（IconFont）

CSS · 發表 2018-10-02 12:13:00

摘要：本篇主要介紹一種非常好用的圖示大法——圖示字型（IconFont）。什麼是圖示字型？顧名思義，它是一種字型，只不過這個字型顯示的並不是具體的文字之類的，而是各種圖示。網站上經常會用到各種圖示，之前網頁上使用圖示主要採用精靈圖（背景位置+背景縮放）來實現，但是這樣使用起來有許多不便之...

本篇主要介紹一種非常好用的圖示大法——圖示字型（IconFont）。

什麼是圖示字型？顧名思義，它是一種字型，只不過這個字型顯示的並不是具體的文字之類的，而是各種圖示。

網站上經常會用到各種圖示，之前網頁上使用圖示主要採用精靈圖（背景位置+背景縮放）來實現，但是這樣使用起來有許多不便之處，一方面縮放處理起來比較麻煩，一方面如果要改動一些圖示就需要去找到設計人員重新設計，然後重新新增，這個過程非常不友好。

圖示字型可以非常便捷的去解決以上問題，使用起來也非常簡單。因為他是字型，所以可以當成字型來引用，只需要給出對應的字元而不需要通過測量背景圖片位置那麼麻煩。並且改變圖示大小隻需要改變字型大小就可以了。這裡有兩個網站推薦：（1）、阿里巴巴向量圖示庫 ofollow,noindex">http://iconfont.cn/ （2）IcoMoon https://icomoon.io/

下面給出IcoMoon 具體使用方法

1、開啟IcoMoon 網站，點選 IconMoon App 。

2、開啟後是具體圖示的介面，可以自己新增自己的圖示進行生成，也可以選用他給出的圖示，在預設圖示的下方會有 add Icons From Library 點選後可以看到更多的圖示供選擇（有免費的有付費的）。

3、點選 Generate Font 後會生成當前選擇的圖示的介面，右下角的Generate Font 也會變成 Download ，也可以進行相關的下載設定（例如：讓其支援ie6/7之類的）。

4、下載完成後會有以下檔案，這些檔案都最好儲存下來，不要隨意刪掉。

5、接下來給出圖示字型的具體使用方法（也可以自行看使用圖示字型的css檔案—— style.css 的相關內容）

（1）、將字型資料夾複製到專案中並且宣告字型（此處程式碼不需要記憶，因為基本上都一樣，直接複製即可）

 @font-face {
font-family: 'icomoon';/*宣告字型名稱，可自行設定，應用的時候對應即可*/
src: url('fonts/icomoon.eot?lep7lm');
src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?lep7lm') format('truetype'),
url('fonts/icomoon.woff?lep7lm') format('woff'),
url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

（2）、使用字型

 .IconMoon {
font-family: 'icomoon';
}

（3）、具體顯示對應圖示

a、直接使用（很方便，但是一般不要使用，因為光看小方塊分辨不出這些圖示有什麼區別），例如

 　　　　　　<li><span class="iconhome"></span></li>
<li><span class="iconsmile"></span></li>
<li><span class="icontongue"></span></li>

span標籤中間的小方塊不是真的方塊，而是對應Demo頁面中每個圖示下面對應右側的方塊。

b、使用css 偽元素選擇器before 來進行新增

<li><span class="icon-home">在這前面有一個home圖示</span></li>
<li><span class="icon-smile2">在這前面有一個smile2圖示</span></li>
<li><span class="icon-tongue2">在這前面有一個tongue2圖示</span></li>
<li><span class="icon-sad2">在這前面有一個sad2圖示</span></li>
<li><span class="icon-wink">在這前面有一個wink圖示</span></li>

對應的css程式碼為

 .icon-home:before {/*content的值是對應的圖示程式碼*/
content: "\e900";
}

.icon-smile2:before {
content: "\e9e2";
}

.icon-tongue2:before {
content: "\e9e4";
}

.icon-sad2:before {
content: "\e9e6";
}

.icon-wink:before {
content: "\e9e7";
}

效果圖為

（4）、正如之前所說，這些圖示本質上是字型，所以可以很方便的去改變顏色，大小，產生陰影效果等

具體的程式碼如下


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
Ul {
list-style: none;
}

@font-face {
font-family: 'icomoon';
/*宣告字型名稱，可自行設定，應用的時候標出即可*/
src: url('fonts/icomoon.eot?lep7lm');
src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

.IconMoon {
font-family: 'icomoon';
}

.icon-home:before {
/*content的值是對應的圖示程式碼*/
content: "\e900";
color: aqua;
font-size: 20px;
}

.icon-smile2:before {
color: deeppink;
font-size: 40px;
content: "\e9e2";
}

.icon-tongue2:before {
color: orange;
font-size: 10px;
content: "\e9e4";
}

.icon-sad2:before {
content: "\e9e6";
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
color: blue;
font-size: 40px;
}

.icon-wink:before {
content: "\e9e7";
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
color: blue;
font-size: 40px;
}
</style>
</head>

<body>
<div class="IconMoon">
<ul>

<li><span class="icon-home">在這前面有一個home圖示</span></li>
<li><span class="icon-smile2">在這前面有一個smile2圖示</span></li>
<li><span class="icon-tongue2">在這前面有一個tongue2圖示</span></li>
<li><span class="icon-sad2">在這前面有一個sad2圖示</span></li>
<li><span class="icon-wink">在這前面有一個wink圖示</span></li>
</ul>
</div>
</body>

</html>

View Code

6、當我們想要給字型新增新的圖示或者減去一些圖示時，只需再次開啟網站，進入到 IconMoon App 頁面，然後點選 Import Icons 將之前我們下載的字型檔案目錄下的 selection.json 檔案，就可以在我們之前選中的基礎上再次進行操作了，用起來非常的方便。

CSS 小結筆記之圖示字型（IconFont）

您可能也會喜歡…