欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

CSS中圖標(biāo)字體IconFont有哪些作用

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

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

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

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

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

下面給出IcoMoon 具體使用方法

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

CSS中圖標(biāo)字體IconFont有哪些作用

2、打開后是具體圖標(biāo)的界面，可以自己添加自己的圖標(biāo)進(jìn)行生成，也可以選用他給出的圖標(biāo)，在默認(rèn)圖標(biāo)的下方 會(huì)有add Icons From Library 點(diǎn)擊后可以看到更多的圖標(biāo)供選擇（有免費(fèi)的有付費(fèi)的）。

CSS中圖標(biāo)字體IconFont有哪些作用

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

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

CSS中圖標(biāo)字體IconFont有哪些作用

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

（1）、將字體文件夾復(fù)制到項(xiàng)目中并且聲明字體（此處代碼不需要記憶，因?yàn)榛旧隙家粯樱苯訌?fù)制即可）　

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

a、直接使用（很方便，但是一般不要使用，因?yàn)楣饪葱》綁K分辨不出這些圖標(biāo)有什么區(qū)別）， 例如

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

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

CSS中圖標(biāo)字體IconFont有哪些作用

b、使用css 偽元素選擇器before 來進(jìn)行添加

            <li><span class="icon-home">在這前面有一個(gè)home圖標(biāo)</span></li>
            <li><span class="icon-smile2">在這前面有一個(gè)smile2圖標(biāo)</span></li>
            <li><span class="icon-tongue2">在這前面有一個(gè)tongue2圖標(biāo)</span></li>
            <li><span class="icon-sad2">在這前面有一個(gè)sad2圖標(biāo)</span></li>
            <li><span class="icon-wink">在這前面有一個(gè)wink圖標(biāo)</span></li>

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

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

效果圖為：

CSS中圖標(biāo)字體IconFont有哪些作用

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

CSS中圖標(biāo)字體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)用的時(shí)候標(biāo)出即可*/
            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的值是對(duì)應(yīng)的圖標(biāo)代碼*/
            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">在這前面有一個(gè)home圖標(biāo)</span></li>
            <li><span class="icon-smile2">在這前面有一個(gè)smile2圖標(biāo)</span></li>
            <li><span class="icon-tongue2">在這前面有一個(gè)tongue2圖標(biāo)</span></li>
            <li><span class="icon-sad2">在這前面有一個(gè)sad2圖標(biāo)</span></li>
            <li><span class="icon-wink">在這前面有一個(gè)wink圖標(biāo)</span></li>
        </ul>
    </p></body></html>

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

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

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

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

廣告

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

營(yíng)銷型網(wǎng)站建設(shè)