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，其他格式不確定 然後再在專案的資源池中確認字型檔案是否加入專案...