Hexo-使用阿里iconfont圖示

Hexo-使用阿里iconfont圖示

因為使用hexo搭建的部落格中，大家並不懂都有什麼圖示，fa fa-xx就懵了，不知道都有什麼。

首先，fa fa-xxx中的圖示可以在 圖示庫 中尋找。

(上面慢的話，可以在這個：另一個圖示庫)

例如：

  首頁: / || fa fa-home
  歸檔: /archives/ || fa fa-archive
  標籤: /tags/ || fa fa-tags

顯而易見，就算能找到也有很多圖示找不到，所以這個時候，我們可以選擇使用阿里iconfont圖示

建立專案

1.進入阿里 iconfont 尋找你想要新增的圖示，並且新增到專案。

2.找到你想新增的圖示，將你想要新增的圖示點選 “新增入庫” 按鈕。

3.點選右上角小購物車圖示，這裡會看到你剛剛新增的所有圖示

4.新增至專案

5.隨便起個專案名字，專案建立成功如下：

6.生成線上連結

點選 Font class 按鈕，點選檢視線上連結，會生成線上連結

7. 開啟連結，紅線上的就是呼叫的名稱。

引入字型樣式

1.存入css

在頁面中右鍵--另存為，存到\themes\butterfly\source\css\:

2.引入檔案

使用圖示

可以在\source\_data中的butterfly.yml修改social：

  iconfont icon-rss: /atom.xml || RSS連結

當然圖示你可以感覺會挺小的，可以在儲存的css檔案中自行修改：

.icon-xxx:before {
  content: "\e600";
  /* 修改顏色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

這樣修改會導致所有這個圖示的大小都會變動。建議的方式是重新寫一個 css，為其新增規則。設定時只需要多加一個class 即可，例如：

.icon-xxx:before {
  content: "\e600";
}
/* 卡片處小圖示 */
.card_icon {
  /* 修改顏色 */
  color: blue;
  /* 修改大小 */
  font-size: 24px;
}

成果圖：

個人部落格為：
MoYu's Github Blog
MoYu's Gitee Blog