Hexo-使用阿里iconfont圖示

zc發表於2021-02-12

Hexo-使用阿里iconfont圖示

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

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

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

1

例如:

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

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

建立專案

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

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

5

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

6

4.新增至專案

7

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

8

6.生成線上連結

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

9
  1. 開啟連結紅線上的就是呼叫的名稱
10

引入字型樣式

1.存入css

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

11 12

2.引入檔案

13

使用圖示

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

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

當然圖示你可以感覺會挺小的,可以在儲存的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;
}
16

成果圖:

17

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

相關文章