css字體圖示怎麼用

在css中，將fonts和style.css檔案引入後，可以使用行內標籤添加字體圖標，語法格式為「<行內標籤元素 class="名稱">」。字體圖示顏色、大小都可以透過對應的css來修改；檔案比較小，利於頁面減少http請求。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

線上產生

透過https://icomoon.io/app/#/select 這個網站來產生。當然還有其他一些類似的網站，但這個真的很贊，很贊，很贊，說三次。 

匯入所有SVG格式的圖標，全選點選GenerateFont產生對應的字體圖示。然後下載已打包好的所有檔案。

頁面引用對應的字型圖示

下載的打包檔目錄結構如上圖所示，我們只需要引入fonts和style.css文件即可。 fonts檔案如下所示，分別為:eot壓縮字庫，整合後的svg圖標，ttf字體，woff字體格式。 

style.css裡是對fonts檔案的引進和對應圖示的樣式。

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

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}

我們可以對上面樣式表進行修改，以達到自己頁面顯示的最佳效果。

<span class="icon-uniE901"></span>

需要什麼圖標，我們只需為一個行內標籤（span，i,em）添加對應的class即可。

總結

使用字體圖示確實非常方便，顏色、大小都可以透過對應的css來修改。而且文件比較小，有利於頁面載入減少了http請求。 

但是如果一個字體圖示檔案已經生成，我們又有新的圖示需要增加時，那麼又需要重新產生對應的fonts檔案和修改css檔案。解決的方法是在生成之前盡可能的把所有用到的圖示都加上，或是使用第三方字體圖示庫。

推薦學習：css影片教學

#

以上是css字體圖示怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！