三、fonticon的使用技巧

1、圖標(biāo)大小

通過(guò)設(shè)置font-size可以改變字體圖標(biāo)的大小，同時(shí)通過(guò)CSS3的transform屬性也可以進(jìn)行縮放。

.iconfont {
    /*更改font-size大小*/
    font-size: 24px;
    /*縮放圖標(biāo)大小*/
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
}

2、圖標(biāo)顏色

字體圖標(biāo)顏色的修改與文本顏色修改完全一樣，可以使用color屬性直接設(shè)置。此外還可以使用CSS3的text-shadow屬性，通過(guò)設(shè)置同樣的顏色，實(shí)現(xiàn)陰影效果，達(dá)到立體感。

.iconfont {
    /*修改顏色*/
    color: #333;
    /*立體效果*/
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

3、hover交互

可以通過(guò)偽類(lèi):hover，為字體圖標(biāo)添加鼠標(biāo)懸浮效果，使其體驗(yàn)更加炫酷。

.iconfont:hover {
    /*更改字體圖標(biāo)顏色*/
    color: #ff6600;
    /*使字體圖標(biāo)放大*/
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}

4、多行文字中的fonticon

在多行文字中，fonticon的大小往往受到行高的影響，為了讓字體圖標(biāo)垂直居中，需要設(shè)置合理的line-height和vertical-align屬性。

.iconfont {
    /*設(shè)置字體圖標(biāo)垂直居中*/
    line-height: 1;
    vertical-align: middle;
}

四、fonticon的兼容性

fonticon在兼容性上，現(xiàn)代瀏覽器完全支持，但是ie8及以下版本不支持CSS中使用content屬性（解決方法：使用引入字體方式的fonticon）；而且有些字體，比如阿里巴巴的iconfont是采用SVG格式做為多彩字體，可能在部分低版本瀏覽器中出現(xiàn)不兼容問(wèn)題。

五、結(jié)語(yǔ)

通過(guò)以上介紹，相信大家對(duì)fonticon字體圖標(biāo)已經(jīng)有了比較清晰的了解。它不僅可以使頁(yè)面加載更快、更炫酷，還可以方便進(jìn)行樣式修改。因此，fonticon字體圖標(biāo)已成為現(xiàn)代網(wǎng)站設(shè)計(jì)的必備技術(shù)之一，相信在不久的將來(lái)，它將更廣泛地應(yīng)用于各類(lèi)網(wǎng)站和應(yīng)用程序中。