Iconfont 在HTML中的使用

番茄西紅柿發(fā)布于2019-04-23 11:42 / 1867人閱讀

摘要：與使用方式相比，具有如下特點(diǎn)兼容性良好，支持，及所有現(xiàn)代瀏覽器。相比于語(yǔ)意明確，書(shū)寫(xiě)更直觀。不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

一、準(zhǔn)備階段：

　　a.進(jìn)入阿里巴巴矢量圖標(biāo)庫(kù)www.iconfont.cn挑選所需的圖標(biāo)，加入購(gòu)物車(chē)

　　b.點(diǎn)擊網(wǎng)頁(yè)中的購(gòu)物車(chē)下載代碼

二、3種方法實(shí)現(xiàn) Iconfont 的HTML顯示

Unicode 引用

Unicode 是字體在網(wǎng)頁(yè)端最原始的應(yīng)用方式，特點(diǎn)是：

兼容性最好，支持 IE6+，及所有現(xiàn)代瀏覽器。
支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。
但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺(tái)里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會(huì)自動(dòng)去色。

注意：新版 iconfont 支持多色圖標(biāo)，這些多色圖標(biāo)在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式

使用步驟如下：
第一步：在CSS代碼塊或CSS文件中使用 @font-face 聲明字體

@font-face {
  font-family: iconfont;
  src: url(iconfont.eot);
  src: url(iconfont.eot?#iefix) format(embedded-opentype),
      url(iconfont.woff2) format(woff2),
      url(iconfont.woff) format(woff),
      url(iconfont.ttf) format(truetype),
      url(iconfont.svg#iconfont) format(svg);
}

第二步：定義使用 iconfont 的樣式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面



完整代碼：

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            @font-face {
                font-family: iconfont;
                src: url(iconfont.eot);
                src: url(iconfont.eot?#iefix) format(embedded-opentype), url(iconfont.woff2) format(woff2), url(iconfont.woff) format(woff), url(iconfont.ttf) format(truetype), url(iconfont.svg#iconfont) format(svg);
            }
            
            .iconfont {
                font-family: "iconfont" !important;
                font-size: 16px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        style>
    head>

    <body>
        <span class="iconfont">span>
    body>

html>

注意：CSS代碼塊中的 @font-face 內(nèi)的 src: url(iconfont.eot); 中的 url 即為之前準(zhǔn)備階段下載的源碼文件夾下的對(duì)應(yīng)文件，此處的完整代碼的文件路徑與 iconfont.eot 在同一目錄下，若相應(yīng)文件不在同一目錄下請(qǐng)修改url參數(shù)。
實(shí)現(xiàn)效果：

2.font-class 引用

font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書(shū)寫(xiě)不直觀，語(yǔ)意不明確的問(wèn)題。

與 Unicode 使用方式相比，具有如下特點(diǎn)：
1. 兼容性良好，支持 IE8+，及所有現(xiàn)代瀏覽器。
2. 相比于 Unicode 語(yǔ)意明確，書(shū)寫(xiě)更直觀?？梢院苋菀追直孢@個(gè) icon 是什么。
3. 因?yàn)槭褂?class 來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改 class 里面的 Unicode 引用。
4. 不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。
  使用步驟如下：
  第一步：引入項(xiàng)目下面生成的 fontclass 代碼（即為準(zhǔn)備階段下載的代碼文件中的iconfont.css文件）重要?。。。?/p>
  第二步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：

　　　3.Symbol 引用　　　

這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法。相關(guān)介紹可以參考這篇文章這種用法其實(shí)是做了一個(gè) SVG 的集合，與另外兩種相比具有如下特點(diǎn)：

- 支持多色圖標(biāo)了，不再受單色限制。
- 通過(guò)一些技巧，支持像字體那樣，通過(guò) font-size, color 來(lái)調(diào)整樣式。
- 兼容性較差，支持 IE9+，及現(xiàn)代瀏覽器。
- 瀏覽器渲染 SVG 的性能一般，還不如 png。

使用步驟如下：

- 第一步：引入項(xiàng)目下面生成的 symbol 代碼：

第二步：加入通用 CSS 代碼（引入一次就行）：

- 第三步：挑選相應(yīng)圖標(biāo)并獲取類(lèi)名，應(yīng)用于頁(yè)面：

三、效果展示

index.html

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <link rel="stylesheet" href="css/iconfont-style.css" />
    head>
    <body>       
       <a class="btn btn-lg btn-primary"><i class="icon icon-info">i> More Abouta>
    body>
html>

iconfont-style.css

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

[class^="icon-"], [class*=" icon-"] {
    font-family: iconfont;
    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-user-female:before {
    content: "e106";
}
.icon-user-follow:before {
    content: "e064";
}
.icon-user-following:before {
    content: "e065";
}
更多定義的icon此處省略........

引用的 fonts 目錄下的文件：

效果圖：

更多精彩的效果圖展示：

云服務(wù)器 GPU云服務(wù)器 iconfont使用 php在html中的 iconfont php中的使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1040.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 769·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4022·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3855·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3909·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3838·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3949·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3613·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6310·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Iconfont 在HTML中的使用

一、準(zhǔn)備階段：

二、3種方法實(shí)現(xiàn) Iconfont 的HTML顯示

Unicode 引用

2.font-class 引用

3.Symbol 引用

三、效果展示

相關(guān)文章

字體圖標(biāo)的使用

前端培訓(xùn)-初級(jí)階段（9 -12）

前端培訓(xùn)-初級(jí)階段（9 -12）

前端培訓(xùn)-初級(jí)階段（9 -12）

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Iconfont 在HTML中的使用

一、準(zhǔn)備階段：

二、3種方法實(shí)現(xiàn) Iconfont 的HTML顯示

Unicode 引用

2.font-class 引用

3.Symbol 引用

三、效果展示

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

一、準(zhǔn)備階段：

二、3種方法實(shí)現(xiàn) Iconfont 的HTML顯示

　　　3.Symbol 引用　　　