Iconfont 在HTML中的使用

2022-09-12 06:51:13 字數 2888 閱讀 3706

a.進入阿里巴巴向量圖示庫www.iconfont.cn挑選所需的圖示,加入購物車

unicode 是字型在網頁端最原始的應用方式,特點是:

注意:新版 iconfont 支援多色圖示,這些多色圖示在 unicode 模式下將不能使用,如果有需求建議使用symbol 的引用方式

使用步驟如下:

第一步:在css**塊或css檔案中使用 @font-face 宣告字型

@font-face
第二步:定義使用 iconfont 的樣式

.iconfont
第三步:挑選相應圖示並獲取字型編碼,應用於頁面

完整**:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

@font-face

.iconfont

style

>

head

>

<

body

>

<

span

class

="iconfont"

>

span

>

body

>

html

>

font-class 是 unicode 使用方式的一種變種,主要是解決 unicode 書寫不直觀,語意不明確的問題。

與 unicode 使用方式相比,具有如下特點:

相容性良好,支援 ie8+,及所有現代瀏覽器。

相比於 unicode 語意明確,書寫更直觀。可以很容易分辨這個 icon 是什麼。

因為使用 class 來定義圖示,所以當要替換圖示時,只需要修改 class 裡面的 unicode 引用。

不過因為本質上還是使用的字型,所以多色圖示還是不支援的。

使用步驟如下:

第二步:挑選相應圖示並獲取類名,應用於頁面:

這是一種全新的使用方式,應該說這才是未來的主流,也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了乙個 svg 的集合,與另外兩種相比具有如下特點:

使用步驟如下:

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 about

a>

body

>

html

>

iconfont-style.css

@font-face [class^="icon-"], [class*=" icon-"] .icon-user-female:before .icon-user-follow:before .icon-user-following:before 更多定義的icon此處省略........
引用的 fonts 目錄下的檔案:

效果圖:

HTML中的iconfont使用

之前遇到乙個用iconfont的demo,這是第一次遇到iconfont,使用審查元素可以看到這是一種用字元表示的方法,而且放大或者縮小的時候不會失真,即具有向量性,相容性很好。於是上網查了一下這個東西,發現現在大多數 都會使用iconfont,下面就分享一下圖示字型的使用 阿里媽媽字型庫 2 宣告...

iconfont在vue的symbol引用方式

這是一種全新的使用方式,應該說這才是未來的主流,也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了乙個svg的集合,與其他兩種方法相比具有如下特點 使用步驟如下 建立乙個自定義元件component svg icon,其 如下 進入iconfont 頁面。註冊賬號,可以選擇gith...

在 iOS 中使用 iconfont

在講icon font之前,首先先來看看普通自定義字型是如何在ios中使用的,兩個原理是一樣的。這裡以kaushanscript regular為例 step 1 匯入字型檔案 將字型檔案拖入專案 ios支援的字型格式有 ttf otf,其他格式不確定 然後再在專案的資源池中確認字型檔案是否加入專案...