阿里媽媽的iconfont的引用問題

一、先進官網

 

      我們看到了上面的這些圖標，是不是很心動，阿里媽媽就是給力，給馬老師點贊，但是問題來了我們怎么去使用呢。

二、點擊圖標

 

 

 

 

 

 

 

 

 

 

 嘿嘿，上面的操作步驟我就不多說了吧，我相信大家都會做的，接下來我們就來講講該如何去使用了，看下面的

三、使用方法

我們先來介紹官網的方法

第一種：

Unicode 引用

將下面一段代碼拷貝到css里面

 

 注意：這段代碼必須引入自己的，不然圖標用不了的。

並定義樣式

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

再引入html

<span class="iconfont">&#x33（這里引入的是你選擇的圖標）;</span>

 

 哈哈，就是上面這樣的，懂了吧，接下來我們用第二種方法

第二種：

font-class 引用

第一步：引入項目下面生成的 fontclass 代碼：

<link rel="stylesheet" href="./iconfont.css"> 

第二步：挑選相應圖標並獲取類名，應用於頁面：

<span class="iconfont icon-xxx"></span>
點擊 font class 后每個圖標下面都會顯示對應的class，直接替換上面的icon-xxx即可。

 

 

引入的css看下面

 

 前面必須加上http:

 

好了，第二種方法就介紹完畢

 

第三種

第一步：引入項目下面生成的 symbol 代碼：

 

 老規矩前面必須加上http:

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

<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 

第三步：挑選相應圖標並獲取類名，應用於頁面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

找到對應的圖標替換掉icon-xxx就可以了

 

上面的三種官網方法我就介紹完畢了，再介紹下第四種方法

第四種

這種方法使用的是偽類選擇器before或者是after；

在第一種方法的基礎上來的

首先還是復制下面一段代碼進css中

接下來我們就可以直接在元素中使用::before和::after了

我就不進行html舉例了，就一個空的span標簽來說吧。注意：有一兩個標簽是不支持偽類的，但是我想一般也是不太用的到的。

下面直接上css就可以了，我們還是使用的是Unicode方式來的，它是一個16進制方式

我們介紹的第一種方法里面的&#xe6f4；直接去掉&#x，在前面加一個反斜線就可以了。

span::before{

   content:"\e6f4"

}

 

最后一種介紹完畢

 

四、總結

     以上就是花了一段時間自己進行總結的，這個實際上沒接觸的話是不知道的，但是接觸后就會覺得是非常的簡單，希望在以后完成項目中能夠更快速度的完成，並能在學習中學會更多的方法。

     特別強調下@font-fance必須是自己添加進項目的圖標，不然不能引用的

 

@   按照下官網的解釋：

Unicode 是字體在網頁端最原始的應用方式，特點是：

• 兼容性最好，支持 IE6+，及所有現代瀏覽器。
• 支持按字體的方式去動態調整圖標大小，顏色等等。
• 但是因為是字體，所以不支持多色。只能使用平台里單色的圖標，就算項目里有多色圖標也會自動去色。