CSS - icon圖標(icon font)

時間 2019-11-12

標籤 css icon 圖標 font 欄目 CSS 简体版

原文原文鏈接

1. 概念

這個小紅點是圖標，圖標在CSS中其實是字體。html

2. 爲何出現本質是字體的圖標?

2.1 圖片增長了總文件的大小。
2.2 圖片增長了額外的http請求，大大下降網頁的性能。
2.3 圖片不能不少地進行縮放，由於圖片放大和縮小會失真。json

3. 字體圖標的優勢，結合圖片和文字的特性

3.1 能夠作出跟圖片同樣能夠作的事情,改變透明度、旋轉度等等
3.2 本質是文字，能夠很隨意的改變顏色、產生陰影、透明效果等等
3.3 體積更小，可攜帶的信息沒有削減
3.4 幾乎支持全部瀏覽器
3.5 對移動端設備友好瀏覽器

4. 字體圖標使用流程

網站看bookmarks，美工 --> 圖標svg

5. 字體引入到HTML

以https://icomoon.io/#home爲例
點擊右上角的IcoMoon App

將下載來的壓縮包中的fonts文件夾放進咱們的項目中
在html中聲明字體性能

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

給盒子使用字體字體

span {
        font-family: "icomoon";
    }

盒子裏面添加結構網站

span::before {
         content: "\e900";
    }
或者  
這個框框是從下載來的zip包中的demo.html裏面找的，複製就能夠
<span></span>

例子1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @font-face {
            /*聲明字體  引用字體*/
            font-family: "icomoon";
            /*咱們本身起名字能夠*/
            src: url('fonts/icomoon.eot?7kkyc2');
            src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-style: normal;
            /*傾斜字體正常*/
        }

        .icon-location {
            font-family: "icomoon";

        }

        .icon-location::before {
            content: "\e947";
            font-size: 100px;
            color: red;
            font-style: normal;
        }

        .car {
            font-family: "icomoon";
        }
    </style>
</head>

<body>
    <!--    方法1，在::before寫cotent-->
    <i class="icon-location"></i>
    <!--    方法2. 複製框框-->
    <i class="car"></i>


</body>
</html>

標籤i，span，em，button也能夠作（由於本質是文字）url

6. 追加新圖標到原來字體庫裏面

若是工做中，原來的字體圖標不夠用了，咱們須要添加新的字體圖標，可是原來的不能刪除，繼續使用，此時咱們須要這樣作
把壓縮包裏面的selection.json 重新上傳，而後，選中本身想要新的圖標，重新下載壓縮包，替換原來文件便可。

假如美工作了個svg，在icomoon裏直接Import，轉成字體圖標。spa

7. 還有其餘使用圖標的方法，沒進行探討

相關標籤/搜索

每日一句

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