CSS 小結(jié)筆記之圖標(biāo)字體（IconFont）

番茄西紅柿發(fā)布于2019-04-23 13:20 / 1148人閱讀

摘要：本篇主要介紹一種非常好用的圖標(biāo)大法圖標(biāo)字體。圖標(biāo)字體可以非常便捷的去解決以上問題，使用起來也非常簡單。并且改變圖標(biāo)大小只需要改變字體大小就可以了。

　　本篇主要介紹一種非常好用的圖標(biāo)大法——圖標(biāo)字體（IconFont）。

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

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

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

　　下面給出IcoMoon 具體使用方法

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

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

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

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

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

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

 @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;
        }

　　　?。?）、使用字體　　　　

 .IconMoon {
            font-family: icomoon;
        }

　　　　（3）、具體顯示對應(yīng)圖標(biāo)

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

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

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

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

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

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

 .icon-home:before {/*content的值是對應(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";
        }

　　　　　　效果圖為

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

具體的代碼如下

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>Documenttitle>
    <style>
        Ul {
            list-style: none;
        }
        
        @font-face {
            font-family: icomoon;
            /*聲明字體名稱，可自行設(shè)置，應(yīng)用的時候標(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的值是對應(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>
    <div class="IconMoon">
        <ul>

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

html>

View Code

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

GPU云服務(wù)器云服務(wù)器字體圖標(biāo) 圖標(biāo)字體圖標(biāo)字體庫 CSS圖標(biāo)庫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1732.html

發(fā)表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 734·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3980·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3806·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

閱讀 3870·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3801·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3902·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6182·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS 小結(jié)筆記之圖標(biāo)字體（IconFont）

相關(guān)文章

***iconfont實(shí)踐小結(jié)***

**img/background/iconfont---誰最適合你？**

**img/background/iconfont---誰最適合你？**

**應(yīng)該了解的 Web 圖標(biāo)解決方案**

**應(yīng)該了解的 Web 圖標(biāo)解決方案**

發(fā)表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS 小結(jié)筆記之圖標(biāo)字體（IconFont）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！