Web端引用iconfont方式

2021-10-05 10:18:40 字數 1322 閱讀 9182

iconfont是阿里巴巴向量圖示庫,我們可以通過搜尋去找到各種各樣的icon小圖示。

2、收藏:將常使用的icon小圖示進行收藏,方便後期查詢使用。

引用iconfont樣式方法分為:unicode、font class、symbol、直接通過img引用小圖示四種方式。

1、unicode

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

注:如果是多色的圖示,建議使用symbol方式引用。

unicode 使用步驟如下:

第一步:拷貝專案下面生成的@font-face

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

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

3
"iconfont" 是你專案下的 font-family。可以通過編輯專案檢視,預設是 "iconfont"。

2、font-class 引用

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

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

使用步驟如下:

第一步:引入專案下面生成的 fontclass **:

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

3、symbol 引用

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

使用步驟如下:

第一步:引入專案下面生成的 symbol **:

第二步:加入通用 css **(引入一次就行):

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

4、img引用

直接將小圖示作為引用即可。

web專案資源 iconfont

iconfont資源鏈結 阿里巴巴向量圖示庫 使用方法 第一步 註冊登入,將需要的iconfont加入購物車 第二步 將購物車中的iconfont新增到專案中 第三步 使用iconfont 可見有三種方式可以使用iconfont,但常用的是通過font class的方式使用 在h5檔案中引入icon...

伺服器端字型和iconfont

1 伺服器端字型 在css3之前,頁面文字所使用的字型必須已經在客戶端中被安裝才能正常顯示,在樣式表中允許指定當前字型不能正常顯示時使用的替代字型,但是如果這個替代字型在客戶端中也沒有安裝時,使用這個字型的文字就不能正常顯示了。為了解決這個問題,在css3中,新增了web fonts功能,網頁中可以...

web端呼叫winform端

在web端定義了乙個方法,需要將值傳給客戶端。1.在web端建立wcf service,定義好方法返回需要傳送的內容。2.在建立wcf service時會有ixx.cs介面類,3.在客戶端的service類,基於soaphttpclientprotocol 在客戶端business定義方法接受值。p...