CSS什麼是圖示字體（IconFont）？有什麼用？-css教學-PHP中文網

首頁

web前端

css教學

CSS什麼是圖示字體（IconFont）？有什麼用？

青灯夜游

Oct 12, 2018 pm 05:45 PM

cssiconfont

本篇主要介紹一種非常好用的圖示大法－圖示字體（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、直接使用（很方便，但一般不要使用，因為光看小方塊分辨不出這些圖標有什麼區別），例如







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

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

在这前面有一个home图标

在这前面有一个smile2图标

在这前面有一个tongue2图标

在这前面有一个sad2图标

在这前面有一个wink图标

對應的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）、如同先前所說，這些圖示本質上是字體，所以可以很方便的去改變顏色，大小，產生陰影效果等

具體的程式碼如下

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <style>
        Ul {
            list-style: none;
        }
        
        @font-face {
            font-family: &#39;icomoon&#39;;
            /*声明字体名称，可自行设置，应用的时候标出即可*/
            src: url(&#39;fonts/icomoon.eot?lep7lm&#39;);
            src: url(&#39;fonts/icomoon.eot?lep7lm#iefix&#39;) format(&#39;embedded-opentype&#39;), url(&#39;fonts/icomoon.ttf?lep7lm&#39;) format(&#39;truetype&#39;), url(&#39;fonts/icomoon.woff?lep7lm&#39;) format(&#39;woff&#39;), url(&#39;fonts/icomoon.svg?lep7lm#icomoon&#39;) format(&#39;svg&#39;);
            font-weight: normal;
            font-style: normal;
        }
        
        .IconMoon {
            font-family: &#39;icomoon&#39;;
        }
        
        .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>
    <p>
        </p>