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

本篇主要介紹一種非常好用的圖示大法－圖示字體（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）、如同先前所說，這些圖示本質上是字體，所以可以很方便的去改變顏色，大小，產生陰影效果等

具體的程式碼如下

    
    
    
    
    
    

        


            <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>
        
    

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

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學， CSS3影片教學

！ ###

以上是CSS什麼是圖示字體（IconFont）？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！