CSS中圖標字體IconFont有哪些作用

這篇文章將為大家詳細講解有關(guān)CSS中圖標字體IconFont有哪些作用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供舞陽企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站設(shè)計、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為舞陽眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進行中。

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

網(wǎng)站上經(jīng)常會用到各種圖標，之前網(wǎng)頁上使用圖標主要采用精靈圖（背景位置+背景縮放）來實現(xiàn)，但是這樣使用起來有許多不便之處，一方面縮放處理起來比較麻煩，一方面如果要改動一些圖標就需要去找到設(shè)計人員重新設(shè)計，然后重新添加，這個過程非常不友好。

圖標字體可以非常便捷的去解決以上問題，使用起來也非常簡單。因為他是字體，所以可以當成字體來引用，只需要給出對應(yīng)的字符而不需要通過測量背景圖片位置那么麻煩。并且改變圖標大小只需要改變字體大小就可以了。這里有兩個網(wǎng)站推薦：（1）、阿里巴巴矢量圖標庫http://iconfont.cn/ （2）IcoMoon的https://icomoon.io/

下面給出IcoMoon 具體使用方法

1、打開IcoMoon 網(wǎng)站，點擊IconMoon App。

CSS中圖標字體IconFont有哪些作用

2、打開后是具體圖標的界面，可以自己添加自己的圖標進行生成，也可以選用他給出的圖標，在默認圖標的下方會有add Icons From Library 點擊后可以看到更多的圖標供選擇（有免費的有付費的）。

CSS中圖標字體IconFont有哪些作用

3、點擊Generate Font后會生成當前選擇的圖標的界面，右下角的Generate Font 也會變成 Download ，也可以進行相關(guān)的下載設(shè)置（例如：讓其支持ie6/7之類的）。

4、下載完成后會有以下文件，這些文件都最好保存下來，不要隨意刪掉。

CSS中圖標字體IconFont有哪些作用

5、接下來給出圖標字體的具體使用方法（也可以自行看使用圖標字體的css文件——style.css的相關(guān)內(nèi)容）

（1）、將字體文件夾復制到項目中并且聲明字體（此處代碼不需要記憶，因為基本上都一樣，直接復制即可）　

 @font-face {
            font-family: 'icomoon';/*聲明字體名稱，可自行設(shè)置，應(yīng)用的時候?qū)?yīng)即可*/
            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）、具體顯示對應(yīng)圖標

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

 　　　　　　<li><span class="iconhome">?</span></li>
            <li><span class="iconsmile">?</span></li>
            <li><span class="icontongue">?</span></li>

span標簽中間的小方塊不是真的方塊，而是對應(yīng)Demo頁面中每個圖標下面對應(yīng)右側(cè)的方塊。

CSS中圖標字體IconFont有哪些作用

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>

對應(yīng)的css代碼為　　　

 .icon-home:before {/*content的值是對應(yīng)的圖標代碼*/
            content: "\e900";
        }
        
        .icon-smile2:before {
            content: "\e9e2";
        }
        
        .icon-tongue2:before {
            content: "\e9e4";
        }
        
        .icon-sad2:before {
            content: "\e9e6";
        }
        
        .icon-wink:before {
            content: "\e9e7";
        }

效果圖為：

CSS中圖標字體IconFont有哪些作用

（4）、正如之前所說，這些圖標本質(zhì)上是字體，所以可以很方便的去改變顏色，大小，產(chǎn)生陰影效果等　

CSS中圖標字體IconFont有哪些作用

具體的代碼如下

<!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';
            /*聲明字體名稱，可自行設(shè)置，應(yīng)用的時候標出即可*/
            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的值是對應(yīng)的圖標代碼*/
            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>
    <p 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>
    </p></body></html>

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

關(guān)于“CSS中圖標字體IconFont有哪些作用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享名稱：CSS中圖標字體IconFont有哪些作用
標題網(wǎng)址：http://aaarwkj.com/article2/igjiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、微信小程序、網(wǎng)站策劃、網(wǎng)站設(shè)計公司、網(wǎng)站收錄、標簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

CSS中圖標字體IconFont有哪些作用