a.進入阿里巴巴向量圖示庫www.iconfont.cn挑選所需的圖示,加入購物車
unicode 是字型在網頁端最原始的應用方式,特點是:
注意:新版 iconfont 支援多色圖示,這些多色圖示在 unicode 模式下將不能使用,如果有需求建議使用symbol 的引用方式使用步驟如下:
第一步:在css**塊或css檔案中使用 @font-face 宣告字型
@font-face第二步:定義使用 iconfont 的樣式
.iconfont第三步:挑選相應圖示並獲取字型編碼,應用於頁面
完整**:
doctype htmlfont-class 是 unicode 使用方式的一種變種,主要是解決 unicode 書寫不直觀,語意不明確的問題。>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
@font-face
.iconfont
style
>
head
>
<
body
>
<
span
class
="iconfont"
>
span
>
body
>
html
>
與 unicode 使用方式相比,具有如下特點:
相容性良好,支援 ie8+,及所有現代瀏覽器。
相比於 unicode 語意明確,書寫更直觀。可以很容易分辨這個 icon 是什麼。
因為使用 class 來定義圖示,所以當要替換圖示時,只需要修改 class 裡面的 unicode 引用。
不過因為本質上還是使用的字型,所以多色圖示還是不支援的。
使用步驟如下:
第二步:挑選相應圖示並獲取類名,應用於頁面:這是一種全新的使用方式,應該說這才是未來的主流,也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了乙個 svg 的集合,與另外兩種相比具有如下特點:
使用步驟如下:
index.html
doctype htmliconfont-style.css>
<
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
>
@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,其他格式不確定 然後再在專案的資源池中確認字型檔案是否加入專案...