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

時間 2019-11-13

標籤 css 小結筆記圖標字體 iconfont 欄目 CSS 简体版

原文原文鏈接

　　本篇主要介紹一種很是好用的圖標大法——圖標字體（IconFont）。css

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

　　網站上常常會用到各類圖標，以前網頁上使用圖標主要採用精靈圖（背景位置+背景縮放）來實現，可是這樣使用起來有許多不便之處，一方面縮放處理起來比較麻煩，一方面若是要改動一些圖標就須要去找到設計人員從新設計，而後從新添加，這個過程很是不友好。json

　　圖標字體能夠很是便捷的去解決以上問題，使用起來也很是簡單。由於他是字體，因此能夠當成字體來引用，只須要給出對應的字符而不須要經過測量背景圖片位置那麼麻煩。而且改變圖標大小隻須要改變字體大小就能夠了。這裏有兩個網站推薦：（1）、阿里巴巴矢量圖標庫http://iconfont.cn/ （2）IcoMoon https://icomoon.io/ ide

　　下面給出IcoMoon 具體使用方法svg

　　一、打開IcoMoon 網站，點擊IconMoon App。字體

　　二、打開後是具體圖標的界面，能夠本身添加本身的圖標進行生成，也能夠選用他給出的圖標，在默認圖標的下方會有add Icons From Library 點擊後能夠看到更多的圖標供選擇（有免費的有付費的）。網站

　　三、點擊Generate Font後會生成當前選擇的圖標的界面，右下角的Generate Font 也會變成 Download ，也能夠進行相關的下載設置（例如：讓其支持ie6/7之類的）。ui

　　四、下載完成後會有如下文件，這些文件都最好保存下來，不要隨意刪掉。url

　　五、接下來給出圖標字體的具體使用方法（也能夠自行看使用圖標字體的css文件——style.css的相關內容）spa

　　　　（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）、正如以前所說，這些圖標本質上是字體，因此能夠很方便的去改變顏色，大小，產生陰影效果等

具體的代碼以下

<!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';
            /*聲明字體名稱，可自行設置，應用的時候標出便可*/
            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

　　六、當咱們想要給字體添加新的圖標或者減去一些圖標時，只需再次打開網站，進入到IconMoon App 頁面，而後點擊 Import Icons 將以前咱們下載的字體文件目錄下的selection.json 文件，就能夠在咱們以前選中的基礎上再次進行操做了，用起來很是的方便。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。