CSS 小結筆記之圖標字體（IconFont）

番茄西紅柿發布于2019-04-23 13:20 / 1137人閱讀

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

　　本篇主要介紹一種非常好用的圖標大法——圖標字體（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的相關內容）

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

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

　　　?。?）、使用字體　　　　

 .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";
        }

　　　　　　效果圖為

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

具體的代碼如下

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;
            /*聲明字體名稱，可自行設置，應用的時候標出即可*/
            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的值是對應的圖標代碼*/
            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圖標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>
    div>
body>

html>

View Code

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

GPU云服務器云服務器字體圖標圖標字體圖標字體庫 CSS圖標庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1732.html

iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
img/background/iconfont---誰最適合你？

摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。前言第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...

icyfire 2019-08-29 10:55 評論0 收藏0
img/background/iconfont---誰最適合你？

摘要：在所有的網站優化話題中，資源文件的壓縮都是占很大比重的。像百度圖片中的友情鏈接所使用的圖片就是作為呈現的，并使用進行合并?？梢詼p少請求，還可以配合離線存儲做性能優化。創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。前言第一篇文章，小弟先做一番自我介紹^ω^姓名不說，年齡21歲，湖北武漢一所二本大學2016屆本科畢業生，大四前的暑假起對web前端產生興趣并有半年實習經驗。ng...

tinyq 2019-08-01 15:23 評論0 收藏0
應該了解的 Web 圖標解決方案

摘要：那么，在我們當下的前端開發中，最常見的圖標解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。沒錯，從 Web 誕生的那天開始，圖標就成為視覺層面不可或缺的一個元素，在一個 Web 頁面中，...

zhangwang 2019-08-02 15:55 評論0 收藏0
應該了解的 Web 圖標解決方案

摘要：那么，在我們當下的前端開發中，最常見的圖標解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。沒錯，從 Web 誕生的那天開始，圖標就成為視覺層面不可或缺的一個元素，在一個 Web 頁面中，...

ingood 2019-08-30 13:05 評論0 收藏0