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

Assist發表於2018-10-02
CSS筆記

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

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

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

　　圖示字型可以非常便捷的去解決以上問題，使用起來也非常簡單。因為他是字型，所以可以當成字型來引用，只需要給出對應的字元而不需要通過測量背景圖片位置那麼麻煩。並且改變圖示大小隻需要改變字型大小就可以了。這裡有兩個網站推薦：（1）、阿里巴巴向量圖示庫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 檔案，就可以在我們之前選中的基礎上再次進行操作了，用起來非常的方便。

相關文章