css字體圖標(biāo)如何使用

這篇文章主要介紹css字體圖標(biāo)如何使用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在css中，將fonts和style.css文件引入后，可以使用行內(nèi)標(biāo)簽添加字體圖標(biāo)，語法格式為“<行內(nèi)標(biāo)簽元素 class="名稱">”。字體圖標(biāo)顏色、大小都可以通過對應(yīng)的css來修改；文件比較小，利于頁面減少http請求。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在線生成

通過https://icomoon.io/app/#/select 這個網(wǎng)站來生成。當(dāng)然還有其他一些類似的網(wǎng)站，但是這個真的很贊，很贊，很贊，說三遍。

導(dǎo)入所有SVG格式的圖標(biāo)，全選點(diǎn)擊GenerateFont生成對應(yīng)的字體圖標(biāo)。然后下載已打包好的所有文件。

頁面引用相應(yīng)的字體圖標(biāo)

下載的打包文件目錄結(jié)構(gòu)如上圖所示，我們只需要引入fonts和style.css文件即可。fonts文件里如下所示，分別為:eot壓縮字庫，整合后的svg圖標(biāo)，ttf字體，woff字體格式。

style.css里是對fonts文件的引入和相應(yīng)圖標(biāo)的樣式。

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

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

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

需要什么圖標(biāo)，我們只需給一個行內(nèi)標(biāo)簽（span，i,em）添加對應(yīng)的class即可。

以上是“css字體圖標(biāo)如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！